How to get menu to nest a 2nd row when browser window is smaller?

Support
#1

So when there’s a normal sized browser all of my menu links fit into one line. But if you go down to a smaller screen size like an ipad it is too long and pushes itself below the logo, making it look wrong and out of place.

So how can I get the menu to nest into a 2nd row when smaller screens are in use?

#2

Hi John,

Thanks for writing in! This particular situation is a matter of managing your menu items to properly fit the physical limitations presented by the narrow screens (this is a consideration that must be taken into account with all themes and designs). What we can do here is to reduce the font-size and distance of the items a bit when viewed on those breakpoints (screen size). Please add this to Theme Options > CSS

@media (min-width: 980px) and (max-width: 1091px) {
		.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
		    padding-left: 15px;
		    padding-right: 15px;
		    font-size: 12px;
	}
}

Hope it helps,
Cheers!

#3

Hmm, that seemed to kind of work. I was able to edit the font to 11 and make it better, but the padding isn’t changing no matter what I put it at, even 2px?

#4

Nevermind now I added it to the Global CSS within Theme Options.

I was adding it to “Additional CSS” within Appearance>Customize>Additional CSS

What is the real differerence between those two sections? I should only add CSS to the Global CSS right?

#5

Hi John,

Yes, our CSS code works.

Both Additional CSS and Theme Options > CSS are global CSS (sitewide application)

The difference is if you put exactly the same CSS on those areas, the one on Theme Options > CSS will be applied and the one on Additional CSS is overwritten. That is because of the Theme Options > CSS is called after the Additional CSS, overwriting all the CSS that is conflicting.

In short Theme Options > CSS has the priotity

However, if the custom CSS that is on Additional CSS has the higher CSS Specificity value, then that is a different story.

CSS Specificity: Things You Should Know

Thanks,

#6

Great, thank you for all of that info!

#7

How can I center the menu row in the header space? It seems to favor the top a bit.

Thanks.

#8

Hi There,

Please navigate to Theme Options > Header > LINKS – ALIGNMENT > NAVBAR TOP LINK ALIGNMENT (PX) > change to 55px:

Hope it helps :slight_smile:

#9

Worked great, thank you!

#10

Glad we were able to help :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.