Why doesn't my website's menu bar show on mobile devices?

Store Design
1

Hello, I was wondering if anyone could help me. I have got my website up and running but when I view it from a mobile device the menu bar at the top doesn’t show up. However it does show up on a pc, Is there a reason for this and can it be amended?

Thanks

2

@DaveClark

Please share store URL!

Thanks!

3

https://aboc-solid-fuels.myshopify.com/
Home / Products / Delivery / About Us ← not appearing on mobile phones

1 Like
4

@DaveClark

Add code Your assets/theme.scss.liquid bottom of the file.

@media only screen and (max-width: 749px){
.header-bar {background-color: #000 !important; color: #fff !important;}
.header-bar a:active, .header-bar a:focus, .header-bar a:hover, .header-bar button:active, .header-bar button:focus, .header-bar button:hover { outline-color: #fff !important;}
.header-bar a, .header-bar button { color: #fff !important;}
}

Thanks!

1 Like
5

Hi @DaveClark ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.announcement-bar--mobile,
.header-bar a, 
.header-bar button {
    color: #fff !important;
}

Hope it helps!

1 Like
6

This solution worked as did the solution below from LitCommerce. I went with the other solution purely as the code was shorter. Appreciate a check and my follow up question if you can help further.

7

Hi. That worked. I now have options in the black bar at the top of the screen, the Menu and the Cart. I also have “Announce something here” that needs to be hidden at this point. Can you help with that as well please?

8

Hi @DaveClark ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.announcement-bar--mobile{
      display: none !important;
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
9

Brilliant. Thank you so much, that has worked.