Mobile only menu items

Support
#1

Website: http://www.whidbeycamanoislands.com/
Theme X - Ethos - Cornerstone - Not Pro

When you view the website on a desktop, you’ll see a standard menubar across the top, and various pulldowns where appropriate. I actually would like to have more that my 7 items and search icon in the menubar, but from a design standpoint, that doesn’t really seem possible. Categories such as “video” and “Filming on Whidbey and Camano Islands” are instead handled as buttons or links on the home page. On the desktop, that’s (mostly) okay, but in the mobile version, the user has to scroll way down to find those items.
So, I’m wondering, can I somehow insert items in the mobile hamburger menu ONLY?
Alternatively, do you see a way (besides limiting the current items to fewer words) to add more to the entire menu?
Thanks in advance for your thoughts on this.

#2

Hi There,

Thank you for writing in, please add those two items on your menu. Yes we can not fit them on the desktop but we can hide them and show only on mobile menu. To do this, first locate your menu item CLASS id, right click the subject menu item and inspect it. You should able to see something like this:

screenshot

For example your menu item “blog” has a class menu-item-5387 and the “calendar” item has a class menu-item-10904

Now lets write a CSS @media query that will hide that 2 items on mobile, you can add this on your Theme Options > CSS

@media (min-width: 980px) {
	.menu-item-10904,
	.menu-item-5387 {
		display: none;
	}
}

Just replace the menu item class with the one that you want to hide.

Hope it helps,
Cheers!

#3

My apologies for not getting back to your sooner. This website had an issue that took a few days to clean up.
Your suggestion was perfect! Thank-you!
And an extra thanks for the illustrations and site specific language.
I learned something here. Thanks!

#4

Glad to hear that,

Cheers :slight_smile: