Re: Not hide the Top bar on Mobile

Solved

How can I prevent the top bar from hiding on mobile with Turbo theme 7.0.2?

Only1mrsfragili
Trailblazer
169 3 51

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)
AvadaCommerce
Shopify Partner
3879 839 984

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.

banned

View solution in original post

Replies 11 (11)

KetanKumar
Shopify Partner
37094 3645 12054

@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
Trailblazer
169 3 51

Thank you. my website is projects817.com

 

KetanKumar
Shopify Partner
37094 3645 12054

@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
Trailblazer
169 3 51

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
37094 3645 12054

@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
Trailblazer
169 3 51

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
37094 3645 12054

@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
Trailblazer
169 3 51

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 839 984

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.

banned
Only1mrsfragili
Trailblazer
169 3 51

OMG Thank you so so so much!

jkuang1
Visitor
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.