Hide a menu

Store Design
1

Hello everyone,

Is there a way to hide specefick menu items on desktop and only show them on mobile?

Because if I have 7 menu items on desktop the headers looks strechted out with logo in the middle and on mobile I have a dropdown menu with button.

Store URL: candyroyal.nl

Kind regards,

2

Hi @kaarstymen12

We can use CSS to custom this. Please try to follow these steps:

  1. Navigate to Online store => Themes => Edit code

BssTechVenture_0-1714967030102.png
BssTechVenture_0-1714967030102.png1790×681 100 KB

  1. Search for the file “theme.css”

  2. Add this code at the end of the file and save

media(min-width: 992px) {
   /* rightNum is the number of the item that you want to hide on the right menu */
   .menudesk-right ul.site-nav li.site-nav__item:nth-child(rightNum) {
      display: none !important;
   }

   /* leftNum is the number of the item that you want to hide on the left menu */
   .menudesk-left ul.site-nav li.site-nav__item:nth-child(leftNum) {
      display: none !important;
   }
}

For example, you want to hide the 2nd and 3rd elements of the menu to the left of the logo, along with the 1st element of the menu to the right of the logo then try this:

@media(min-width: 992px) {
   .menudesk-right ul.site-nav li.site-nav__item:nth-child(1),
   .menudesk-right ul.site-nav li.site-nav__item:nth-child(2){
      display: none !important;
   }

   .menudesk-left ul.site-nav li.site-nav__item:nth-child(2),
   .menudesk-left ul.site-nav li.site-nav__item:nth-child(3){
      display: none !important;
   }
}

This is the achieved results

view (3).png
view (3).png1884×925 303 KB

Hope this helps!