Docs

[preetga]

Hi there!

My menu (nav bar) expands the whole width of my computer screen which is great, however when I view on my ipad the nav bar is in 2 lines which I don’t want. Is there any way to squash all the items on my nav bar for ipad size screens or better still just show it as an expandable menu as on smaller screens?

http://www.naturalhealthstar.com/

Many thanks,
Preet

[Friech]

Hi Preet,

Thanks for writing in! That happens when the navbar width gets to narrow and there are numbers of menu items that needs to be fit.

In this case we can decrease the menu items font-size on a narrowed screen or reduce the menu items padding.

@media (min-width:  980px) and (max-width: 1070px) {
	body .x-navbar .desktop .x-nav > li > a {
    	font-size: 12px;
	}
}

Before you add that css code, please check your whole custom CSS here: http://csslint.net/ and address the missing brackets issue.

Hope it helps, Cheers!

[preetga]

Thank you so much for your help! This works great.
Also thanks for the link – I fixed the issue with the brackets.

Best regards,
Preet

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts