Why isn't my Thalia theme header displaying menu items on mobile?

Store Design
, , , ,
1

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

2

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

3

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

4

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

5

I cannot seem to find the assets/main.css file