Solved

Why isn't the menu bar showing on mobile devices in Shopify?

DaveClark
Excursionist
39 0 10

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 

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 8 (8)

dmwwebartisan
Shopify Partner
12280 2546 3694

@DaveClark 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DaveClark
Excursionist
39 0 10

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

dmwwebartisan
Shopify Partner
12280 2546 3694

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
DaveClark
Excursionist
39 0 10

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. 

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
DaveClark
Excursionist
39 0 10

Brilliant.  Thank you so much, that has worked.

LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
DaveClark
Excursionist
39 0 10

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?