Navigation Bar issue on Suivant

[dtlyme]

HI - can anyone guide me how to fix this issue with our main navigation bar: I added a top menu item (Outlet) and it has bumped the search icon down onto a 2nd line. How do I get it all back on one level without taking "OUTLET" out of the top menu level? Thank you in advance for help! https://www.elizab.com

[Brennan]

That navigation has a width of 14% for each level-1 category, so when you added outlet it is pushing the search icon to the second line. An easy fix would be to lower this to something smaller like 12%

.navigation-set .level-1 {
font-size: 1rem;
height: 3.375em;
line-height: 3.375;
text-transform: uppercase;
width: 12%;
}

[dtlyme]

Thanks Brennan - I lowered it to 12% and it didn't do anything so I tried 10% and still no go. Something must be overriding that style??

[lesliekirk]

Thanks Brennan - I lowered it to 12% and it didn't do anything so I tried 10% and still no go. Something must be overriding that style??

Yes, there is. The media setting is overriding what you are trying to do

@media only screen and (min-width:960px)

You can try adding the "!important" to what you added (or also change the "media" style too)

width: 10% !important;

[dtlyme]

Leslie - thank you - the addition of the important tag did not do it either :-(. Making the font 0.75rem only made the font smaller - I was hoping smaller font would adjust the menu items width. sigh. Where do I access the @media only screen and (min-width:960px) settings- and what would I adjust that to? I also realize I am missing the right side border on the Eliza B and Leather Man headings. I wonder why that is? Very much appreciate your help!

[dtlyme]

Sigh - I am still looking to fix this! My nav is driving me CRAZY!!

[Leanne]

Look in /mm5/themes/suivant/css/structure.css around line 278. This is the piece of code you need to change. Setting the width to 12% seems to do it.

.navigation-set .level-1 {
font-size: .9rem;
height: 3.375em;
line-height: 3.375;
text-transform: uppercase;
width: 14%;
font-weight: 500;
}