Menu items does not align correctly

menu items in header does not get aligned in one row, the fourth element and ahead create a second line.

Need to fix this, probably the best would be to left align. Can you please help me with this?

Thanks

Hello there,

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

    @media only screen and (min-width: 1200px) {
      .site-header .site-branding.col-md-4 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;  
      }
      .site-header .main-navigation.col-md-8 {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;      
      }
    }

Regards,
Kharis

Still does not fit, may be if we can reduce font size or spacing. Also it would be nice if we can reduce header height. Thanks a lot.

Hello there,

Try this code and do your own adjustments if needed.

    @media only screen and (min-width: 1200px) {
      #site-navigation.main-navigation .menu > li  {
        padding-left: 5px;
        padding-right: 5px;
      }
    }

Regards,
Kharis

Yes! It works. Thanks a lot.

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.

Regards,
Kharis