Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
Please share store URL!
Thanks!
https://aboc-solid-fuels.myshopify.com/
Home / Products / Delivery / About Us <-- not appearing on mobile phones
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!
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.
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.
Brilliant. Thank you so much, that has worked.
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!
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?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024