Okay
  Public Ticket #354037
Menu stretching to two rows
Closed

Comments

  • Eric started the conversation
    January 18, 2015 at 10:34am

    I added a page to my main menu and now it is stretching to two rows in certain browsers. Is there a way to change the spacing of the menu or the header to prevent this from happening?

    Thank you!

  •  8,452
    Tahir replied
    January 19, 2015 at 4:54pm

    Hey!

    Add this into the Custom CSS box located in your Salient Options panel :
    header#top nav > ul > li > a {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
    Thanks 

    ThemeNectar Support Team 

  • Eric replied
    January 30, 2015 at 10:19am

    Thanks! That does work, but it makes the menu items look kind of crowded (I also tried 8px instead of 5 but that didn't solve the issue). 

    I was hoping there was a property that would shrink the padding between the website title and the first menu item (in my case between "Corner Carving" and "Home". Does that exist?

  •  8,452
    Tahir replied
    January 30, 2015 at 4:48pm

    Hey Again!

    Add this into the Custom CSS box located in your Salient Options panel :
    header#top nav > ul > li:first-child > a {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
header#top nav > ul > li:nth-child(2) > a {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
header#top nav > ul > li:nth-child(3) > a {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
    With the nth child selector you can change padding of individual menu items. 
    Best,
    -T

    ThemeNectar Support Team 

  • Eric replied
    February 4, 2015 at 9:32pm

    Thanks, that worked great!