Wider header-menu area

Hello,

Thank you for this great theme!
Is there a way to make the header-menu area wider so that it can contain more menu-items without wrapping to a new line? The solution shouldn’t mess up the mobile menu…

Best regards!

Hello there,

You’ll need to enlarge the site main menu container and adjust the width of the site title area, which can be done by adding this CSS code to Appearance > Customize > Additional CSS from your dashboard.


@media only screen and (min-width:1025px) {
  
  .site-header .col-md-4 {
    width: 20%;
  } 
  
  .site-header .col-md-8 {
    width: 80%;  
  }  
  
}

If it isn’t enough, try reducing the menu item padding with this extra CSS code:


#mainnav .menu > li {
  padding-left: 5px;
  padding-right: 5px;
}

Regards,
Kharis