Solved

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

mahad18
Shopify Partner
10 0 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

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12294 2548 3698

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 4 (4)

dmwwebartisan
Shopify Partner
12294 2548 3698

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
mahad18
Shopify Partner
10 0 1

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

skipy129
Tourist
4 0 2

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

 

SAN_MSWEB
Shopify Expert
979 117 123

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin