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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024