Shopify themes, liquid, logos, and UX
Is there any way to stop the top bar from hide on mobile? I have the turbo theme 7.0.2 and my website is projects817.com
Solved! Go to the solution
This is an accepted solution.
Hi @Only1mrsfragili ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css->paste below code at the bottom of the file:
@media (max-width: 798px) {
.header {
display: block !important;
position: fixed;
top: 30px;
z-index: 99999;
}
.header .promo-banner,
.header .main-nav__wrapper,
.header .social_icons,
.header .menu li,
.header .top-bar--right-menu {
display: none !important;
}
.header .menu li:first-child {
display: block !important;
text-align: center;
max-height: 40px;
}
#header .top-bar {
margin-top: 40px;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thank you. my website is projects817.com
thanks
can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 798px) {
.promo-banner--show .promo-banner {display: none !important;}
}
Hi, that code didn't work for want I want. I want for both of the bars above the menu to show even on mobile view. At the moment the bar with the number hides on mobile and I want for it to show.
can you show where did you add this code?
I added the code here and it made both bars ago away and that is the opposite of what I want.
can you this
@media(max-width: 798px) {
.promo-banner--show .promo-banner {display: none !important;}
}
This didn’t work either, also I’m confused on why the code says none. Doesn’t that take way the top bar? I would like to see them both like this on mobile. I don’t want to take anything away. I wanna sed the free shipping and the phone number.
This is an accepted solution.
Hi @Only1mrsfragili ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css->paste below code at the bottom of the file:
@media (max-width: 798px) {
.header {
display: block !important;
position: fixed;
top: 30px;
z-index: 99999;
}
.header .promo-banner,
.header .main-nav__wrapper,
.header .social_icons,
.header .menu li,
.header .top-bar--right-menu {
display: none !important;
}
.header .menu li:first-child {
display: block !important;
text-align: center;
max-height: 40px;
}
#header .top-bar {
margin-top: 40px;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
OMG Thank you so so so much!
I'm having the same issue but the code(s) aren't working. The menu bar is still not locked on the mobile version of the site.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024