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

[Only1mrsfragili]

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

[KetanKumar]

@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.

[Only1mrsfragili]

Thank you. my website is projects817.com

[KetanKumar]

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

[Only1mrsfragili]

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]

@Only1mrsfragili 

can you show where did you add this code?

[Only1mrsfragili]

I added the code here and it made both bars ago away and that is the opposite of what I want.

[KetanKumar]

@Only1mrsfragili 

can you this 

@media(max-width: 798px) {
.promo-banner--show .promo-banner {display: none !important;}
}

[Only1mrsfragili]

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. 

[AvadaCommerce · 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.

[Only1mrsfragili]

OMG Thank you so so so much!

[jkuang1]

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.