Activello Mobile Menu Problem

Hello everybody,
i am struggeling to figure out the problem of my mobile menu.
when in mobile, the letters of the menue points are apperaing vertically. I am guessing that it might be a conflict with some of the css adjustements I did regarding the logo.
Here is what the menu looks like.

Here are my custom css changes:

#page .dropdown-menu> li> a:hover {
    color: #fff;
    background-color: #d64e39;
}
body .navbar-default .navbar-nav .current-menu-ancestor a.dropdown-toggle {
    color: #d64e39;
}
body .dropdown-menu > .active > a{
  background-color: #d64e39;
}

footer#colophon {
    padding: 25px 0;
}

#colophon .copyright {
    display: none;
}

#page .entry-title {
    font-family: impact;
    font-style: normal;
}

div#logo {
    padding-top: 20px;

}
nav.navbar.navbar-default .container {
    max-width: 100%;
	min-height: 70px;

}
nav.navbar.navbar-default {
    float: right;
    max-width: 85%;
    padding: 35px;
box-shadow: none;

}
#masthead > .container {
    float: none;
    max-width: 170px;
    position: absolute;
    margin: auto;
    padding-left: 30px;

}
.entry-meta {
    font-size: 12px;
    font-family: century gothic;
}

body.blog .entry-footer span.comments-link {
    display: none;
}

/* SUCHE AUSBLENDEN */

.site-navigation-inner .nav-search {
    display: none;
}

/* LINIE UNTER HEADER WEG */

#masthead #line {
    display: none;
}

/* KONTAKTFORMULAR ANPASSUNGEN */

#anfrage {
  background:#fcd2c4;
  padding:20px 15px 0 15px;
  border-radius:5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
}
.form_half {
width: 49.5%;
float: left;
margin-right: 1%;
}
.form_half_last {margin-right:0;
}
#anfrage input {
  width:100%;
}
#anfrage input[type="submit"] {
  background:#FFA500;
padding:20px;
  font-size:18px;
}
#anfrage input[type="submit"]:hover {
  background:#8BC34A;
}
#anfrage input:focus {
  border:1px solid #ffa500;
  background:#FFF9C4;
}
#anfrage div.wpcf7-response-output {
  background:#fff;
	
  padding: 1.5em 1em;
}

/* SLIDER ANPASSUNGEN */

.home .flexslider { max-height:400px; overflow: hidden;} 

div.flex-caption {
    top: 100px;}

.flexslider .slides img {
width: 100%;
}

.page-title {
display: none;
}

/* Hintergrundfarbe Texte */

#main {
    background-color: #fff;
    padding: 30px 30px 30px;
}

/* Hintergrundfarbe Logo */

header{
      background-color: white;
      margin: "50"px;
      width: "50"px;
}

/* Abstand Posts */

.archive #page article .post-inner-content {
    padding: 35px 0;
    margin-bottom: 0;
}

/* Linie zwischen Posts */

.hentry {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2em;
}

/* Dunkler Hintergrund slider */

.flexslider .slides li.flex-active-slide:before {
    display: block;
    width: 2000px;
    height: 550px;
    background: rgba(0,0,0,0.25);
    content: "";
    z-index: 0;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* kein hover effekt bei beitragsbildern */

body.single-post header + a{
  pointer-events: none;
  cursor: default;
}

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

link to the website is:

Hello there,

I hope you are doing well today.

You can use the following CSS code to fix the mobile menu appearance by going to Appearance > Customize > Additional CSS and pasting it there.


/*Mobile Menu*/
@media (max-width: 768px){
.site-navigation-inner .navbar-nav>li {
    float: left;
}

.navbar-collapse.navbar-ex1-collapse.collapse.in {
    width: 107px !important;
}

.navbar-collapse.navbar-ex1-collapse.collapse.in {
    width: 188px !important;
    left: -81px;
}
}

Best Regards,
Support

Greeeeeat!
Thanks for your amazingly quick help!

Best regards
Clemens

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support

Hi,
i tried this customized CSS but mobile menu does not work at all
what ca i do ?
my website https://bricegenevois.com/
thanks