How to remove page menu from mobile version?

Shopify Discussion
, ,
1

Hi, I’m using the horizon theme. Website is parkkafeengjovik.no. Currently, on the mobile version, you can see the hamburger menu, but also all the menu options are displayed at the top of the page. How can I remove them so that only the hamburger icon is displayed on the mobile version?

2

Hi @pnd195

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > style.css and paste this at the bottow of the file

@media screen and (max-width: 749px) {
  .header__row–mobile {display: none !important;}
}

image
image305×282 19.7 KB

Best regards,
Devcoder :laptop:

3

hi @devcoders , there is no style.css. Would it be base.css or theme.css instead?

4

Hi @pnd195

In your Shopify Admin go to online store > themes > actions > edit code

Find Asset > base.css and paste this at the bottom of the file

5

It didn’t work unfortunately

6

Hi @pnd195

Try this code.

@media screen and (max-width: 749px) {
.header__row–mobile {
display: none!important;
}
}

7

Hey @pnd195

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.header__row.header__row--mobile.desktop\:hidden.color-scheme-1 {
    display: none !important;
}
</style>

RESULT:

image
image345×752 63.9 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

8

Hey there @pnd195
In Horizon it usually happens when the header or navigation block is configured to show menu items with the mobile menu. Go to your Theme Editor > Header > and see if you find anything there related to mobile navigation or menu layout or show navigation links on mobile.

In case there isn’t an option to do so, you can hide the menu links on mobile with a bit of CSS in your theme’s custom CSS section while still having the hamburger menu visible. Test the change first to be sure you’re not breaking desktop navigation.

9

No need to mess with any files. You can actually fix this right in your theme’s header settings

  1. Go to your Shopify Admin and navigate to Online Store > Themes.
  2. Click the green Customize button on your active theme to open the editor.
  3. In the left-hand sidebar menu, click on the Header section.
  4. Look through the settings on the right side for a section labeled Navigation Layout, Mobile Menu, or Desktop Menu Visibility.
  5. Change the layout setting so that the main desktop links are explicitly set to hide or switch to a dropdown format on smaller screens, then hit Save in the top right corner.