Header Menu showing twice (both sides) on mobile

On our mobile site, our header menu is showing twice - as a hamburger menu on the left and a full list on the right. Our logo has also disappeared from the middle for some reason. Can someone help us fix this so we only have 1 menu - hamburger menu on the left and the shopping cart on the right?

Hey @BellyBugs

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 tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Hi @BellyBugs ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file base.css.

Step 3. Add this code at the end of the file

@media only screen and (max-width: 990px) {
  .header__inline-menu {
    display: none!important;
  }
}

Result:

If it helps you, please like and mark it as the solution.

Best Regards

Hi @BellyBugs ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (max-width: 989px) {
    .header__inline-menu .list-menu {
        display: none;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

  • Here is the solution for you @BellyBugs
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 600px) {
.header__inline-menu {
     display: none !important;
}
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.