Menu Bar

Solved
DaveClark
Excursionist
26 0 4

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)

Accepted Solutions
LitCommerce
Trailblazer
288 71 72

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
9824 2236 3073

@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 | Bag is a cart drawer that maximizes your sales. View app →
DaveClark
Excursionist
26 0 4

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

dmwwebartisan
Shopify Partner
9824 2236 3073

@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 | Bag is a cart drawer that maximizes your sales. View app →
LitCommerce
Trailblazer
288 71 72

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
26 0 4

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. 

DaveClark
Excursionist
26 0 4

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?

LitCommerce
Trailblazer
288 71 72

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

DaveClark
Excursionist
26 0 4

Brilliant.  Thank you so much, that has worked.