If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

WordPess. How to hide menu items in mobile menu but keep them on desktop layout

WordPess. How to hide menu items in mobile menu but keep them on desktop layout

This tutorial shows how to hide menu items in mobile menu but keep them on desktop layout in WordPress.

Wordress. How to hide menu items in mobile menu but keep them on desktop layout-1

  1. We have enabled emulation of mobile devices in built-in inspector of Chrome browser. Press F12 in order to open the inspector. Inspect mobile menu. Expand section with menu:

    Wordress. How to hide menu items in mobile menu but keep them on desktop layout-2

  2. You can see the list of menus. Let’s hide About us menu item in mobile menu using CSS only. About us menu appears third in the list. Basically, you should specify this number in CSS selector:

    Wordress. How to hide menu items in mobile menu but keep them on desktop layout-3

  3. Go to Appearance -> Editor. Add the following CSS code and save changes:

    .select-menu option:nth-child(3) {
    	display: none !important;
    	visibility: hidden !important;
    }

    In this code 3 is a number of element in the list. You should replace it with appropriate number. In order to hide several menus, you should add the same code and change number in option:nth-child(3) section:

    Wordress. How to hide menu items in mobile menu but keep them on desktop layout-4

  4. Clear browser cache, cookies and check your site. You can see that About us menu item is hidden. Screenshot shows te code that hides about us menu:

    Wordress. How to hide menu items in mobile menu but keep them on desktop layout-5

  5. You can see that menu About us still appears on Desktop layout:

    Wordress. How to hide menu items in mobile menu but keep them on desktop layout-6

Feel free to check the detailed video tutorial below:

WordPess. How to hide menu items in mobile menu but keep them on desktop layout