Search
Generic filters
Exact matches only

Navigation item HIDDEN in Desktop but SHOWS in Mobile Menu

16th December 2019

Wordpress - Show

wordpress category

A simple way to show a highlighted Contact button of your choice, that is part of your navigation drop down only when it becomes responsive in mobile.
I am using Elementor (WordPress plugin).

Desktop view
Navigation item HIDE in Desktop,,

Mobile view
Navigation item HIDE in Desktop,,

Enable classes in your menu

Navigation item HIDE in Desktop,,

Step 1:

Add a class to the contact button in the menu area called .contactmenu
Navigation item HIDE in Desktop,,

Step 2:

Add the CSS to your style sheet

Step 3

Test this – your menu item ‘contact’ will now appear in your mobile view, but not in your desktop view as its hidden by css.

Step 4

Add any button of your choice to the desktop view (in this case a contact button) and make sure that it is hidden when in mobile view.
Navigation item HIDE in Desktop,,
Navigation item HIDE in Desktop,,

Summary: –
The button will SHOW in Desktop but be HIDDEN in Mobile version
The menu item called ‘Contact’ will be HIDDEN in desktop by CSS but SHOW in mobile version.

Was this code snippet helpful?

Comment on this Code Snippet?