Change header menu and logo css


The problem I have is that the last part of the top menu don’t show in a straight line.

You can see my top menu here -

“Book Massage” which is a menu buttom I made with css color is jumping down beneath the other menu if you make the browser smaller.

I tried to figur out how to avoid this and it seems the css code below helps doing this, but how do I change this in the theme?

I used “-” so i can show you the code.

BEFORE -----> this is what you have in your theme

<-div class=“site-branding col-md-4 col-sm-6 col-9”>
<-nav id=“site-navigation” class=“main-navigation col-md-8” style=“top: auto;”>

AFTER --------> This is what I want in my theme and change settings

<-div class=“site-branding col-md-2 col-sm-6 col-9”>
<-nav id=“site-navigation” class=“main-navigation col-md-10” style=“top: auto;”>

Best regards

Hello there,

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1200px) {
      .site-header .site-branding {
        max-width: 210px;
      .main-navigation > li:last-child {
        padding: 0 0 !important;
      .site-header .col-md-8 {
        flex: 0 0 72%;
        -ms-flex: 0 0 72%;
        max-width: 72%;    


Hi Kharis,

Thank you for the reply. It seems to work better now. Thank you :slight_smile:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.