FROM CACHE - en_header
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Some merchants and partners are experiencing problems when logging into their Shopify accounts. We will continue to provide updates to you here.

Not hide the Top bar on Mobile

Solved
Only1mrsfragili
Pathfinder
124 3 29

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

 

Screenshot 2022-03-02 at 17.28.43.pngScreenshot 2022-03-02 at 17.28.22.png

Accepted Solution (1)

Accepted Solutions
AvadaCommerce
Shopify Partner
3879 837 803

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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

View solution in original post

Replies 11 (11)
KetanKumar
Shopify Partner
36265 3609 11701

@Only1mrsfragili 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Only1mrsfragili
Pathfinder
124 3 29

Thank you. my website is projects817.com

 

KetanKumar
Shopify Partner
36265 3609 11701

@Only1mrsfragili 

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;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Only1mrsfragili
Pathfinder
124 3 29

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.

KetanKumar
Shopify Partner
36265 3609 11701

@Only1mrsfragili 

can you show where did you add this code?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Only1mrsfragili
Pathfinder
124 3 29

I added the code here and it made both bars ago away and that is the opposite of what I want.Screenshot 2022-03-03 at 07.45.39.png

KetanKumar
Shopify Partner
36265 3609 11701

@Only1mrsfragili 

can you this 

@media(max-width: 798px) {
.promo-banner--show .promo-banner {display: none !important;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Only1mrsfragili
Pathfinder
124 3 29

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. 

5DD0DB60-CDDB-4E86-B895-880DCE58B13A.jpeg

AvadaCommerce
Shopify Partner
3879 837 803

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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

Only1mrsfragili
Pathfinder
124 3 29

OMG Thank you so so so much!

jkuang1
New Member
1 0 0

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.