Tips on how to hide and show menu items on mobile and desktop

Many folks have asked about this.
This is the method I use.

I want to be able to selectively show or hide menu items from the main desktop menu or the mobile menu.
Why?

Sometimes there are many extra buttons a user will need to have access to quickly on a mobile device, but these items dont need to show on the main menu. Often we add supplemental links at the footer of websites for advertising inquires or secondary pages. We dont want them on the main menu, but they are important, yet we dont want mobile users scrolling for miles to find the button either.

or another reason…

The items shown in a drop down or megamenu on the desktop do not look good on mobile.
for example, you may have a button called “help” on the desktop. This button would indclude items like “reset password” or “your account”.

on a desktop it rolls over very nicely, but on mobile it requires an extra tap to the “help button” and then drop the menu down to see the choices.

so to solve this you can selectively hide or show menu items via CSS
They will still load and might be visible for a split second as CSS will only visually hide it wont remove it.

You will often need to create TWO menu items of the same things.
You can show one to the desktop users and show another to the mobile users.

To hide menu items from desktop but show on mobile:
(find the menu item number in the menu section of wordpress, just roll mouse over and look at the link at the bottom of the browser, it will contai your menu item #)

Then add this to the Custom CSS section of your theme panel with your menu numbers
(replace 123 with your menu item number)

@media(min-width:767px){
.menu-item-123, .menu-item-123{
display:none!important;
}

To show items ONLY on desktop and HIDE on mobile try this
It is especially usefull when you dont want drop downs to appear on the mobile menu slideout but still want the items to show in the mobile menu slideout.

@media(max-width:767px){
.menu-item-123, .menu-item-123{
display:none!important;
}}

Admins feel free to correct me.