Header not showing on mobile.

[mahad18]

So I'm using Thalia theme on my website and the header shows all the menu items properly on desktop but when I open it on my phone it doesn't show any menu items in the header. However if I make my phone screen vertical the menu items start showing but when I'm holding the phone horizontally it doesn't show the menu items. Is there any way to fix this? or is there any way to make the menu items appear on mobile in any other format if not a horizontal strip?

the URL for my site is: wokebyrk.myshopify.com

[dmwwebartisan · Accepted solution]

@mahad18 

Please add the following CSS code to your assets/main.css bottom of the file.

@media only screen and (max-width: 600px){
.topbar-email, .topbar-child1 {color: #000 !important;}
.side-menu .main-menu>li>a {color: #000 !important;}
.topbar-social-item {color: #000 !important;}
.side-menu .main-menu>li>a { color: #000 !important;}
}

Thanks!

[mahad18]

Hey, thank you for the solution. It worked, however there is a lot of whitespace below the menu items. Any way I can reduce that? TIA

[SAN_MSWEB]

Hi @mahad18 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the main.css file:

@media only screen and (max-width: 600px){

.side-menu .main-menu>li>a, .topbar-social-item, .topbar-email, .topbar-child1, .side-menu .main-menu>li {color: #000 !important;}

}

Regards,

San