Top bar menu is not visible in mobile view - Flex theme

Store Design
, , , , , , , , ,
1

My store https://intuitsport.com/ is using Flex theme.
I have a top bar with a menu and its showing up properly on desktop view. However, on mobile devices, I’m having trouble making the top bar and its menu visible. Any help would be totally appreciated.

2

Hi @technase ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

I realize this situation isn’t exactly what you’d hope for, but I’ve got a potential solution that I’d like to share with you:

  1. Go to Online Store → Theme → Edit code.
  2. Open your assets/styles.css file.
  3. Add the code at the end of the file:
@media only screen and (max-width: 798px){
.top-bar{
    display: block !important
}
}

Beae_Anthony_0-1692896331369.png
Beae_Anthony_0-1692896331369.png371×582 203 KB

Best regards,

Anthony

3

thank you for that.
Can the menu be arranged directly beneath the main menu in the menu drawer?

4

Because your top bar and menu are two separate sections. To do that, I think you should ask an expert who will customize it for you

5

Got it. Is there any way we can reduce the size of font on mobile view only so all the menu items are in one line ?

6

Yes, you can try this code below:

Beae_Anthony_0-1692898752850.png
Beae_Anthony_0-1692898752850.png373×617 205 KB

7

Do I add this code after the first one that you provided ?

8

You can add the following final code at the end of the styles.css file

@media only screen and (max-width: 798px){
.top-bar{
    display: block !important
}
.top-bar *{
    font-size: 9px;
}  
a.navbar-link.is-arrowless {
    padding: 14px 4px
}
}
9

Thank you so much for your help and all your time.

10

I am very happy to have helped you. If you have any further problems, don’t hesitate. Have a good day!