How to prevent the main nav menu items from being pushed to lower level

I notice how on different laptop sizes my site’s main menu is too small and pushes the last items to the bottom making the menu way too big. I was wondering if there was CSS to prevent this from happening by either auto decreasing the font size of smaller laptops or just making those end items disappear.

Screenshot included below – thanks!!

Also I found the same thing for the right side of the menu on smaller mobiles, Is there anyway to force these to stay in the same line by maybe moving them to the left instead of putting them on the lower level? (screenshot attached)

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

@media (max-width: 1120px) {
	body .main-nav .menu>li>a {
		font-size: 11px;
	}
}

@media (max-width: 320px) {
	body .main-header .site-logo {
		width: 25% ;
	}
}

Regards

That works perfectly for the left side of the menu with words, but can it also be done for icons on the right side (sandwich/cat/etc.) since on smaller phones it still pushes the sandwich logo down

Thanks!

Hello,

Please replace this snippet:

@media (max-width: 320px) {
	body .main-header .site-logo {
		width: 25% ;
	}
}

With this one:

@media (max-width: 320px) {
	body .main-header .site-logo {
		width: 20% ;
	}
}

Best Regards

[Author]

Posts