Change text color on the mobile version of the store (Header section)

Solved
AndreaRigoldi
New Member
5 0 0

Hello and thank you to anyone taking the time to assist me. I've recently changed specific parts of text (font and color) using the Fontify app. But I'm having problems with the mobile version: the text in the header section is white on the desktop version (black background) but on mobile the buttons for the drop down menu remain black, and the writings of the menu are white on white.

Could anyone please help me? The URL is https://ilpescatorevero.com/.

 

0 Likes

@AndreaRigoldi, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset >  theme.css and paste this at the bottom of the file:

.site-header svg{
    fill: #ffffff !important;
    opacity: 1;
}

.site-header svg:hover{
    opacity: .8 !important;
}


You can change the #ffffff to any hex color you'd like. 

diego_ezfy_0-1626035788070.png


Please let me know whether it works.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
AndreaRigoldi
New Member
5 0 0

That works perfectly. But I still have to ask about the drop down menu titles (on mobile): they look white on white, they look black only when I hover over them. 
Ideally I would want white text on black (#010101).

0 Likes

@AndreaRigoldi 

You can delete the previous code and use this one instead:

.site-header svg{
    fill: #ffffff !important;
    opacity: 1;
}

.site-header svg:hover{
    fill: #ffffff !important;
    opacity: 1 !important;
}


Kind regards,
Diego

 

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
AndreaRigoldi
New Member
5 0 0

I've done as you said but the problem remains.

0 Likes

This is an accepted solution.

@AndreaRigoldi 

Try the following code:

.site-header svg{
    fill: #ffffff !important;
    opacity: 1;
}

.site-header svg:hover{
    fill: #ffffff !important;
    opacity: 1 !important;
}


.mobile-nav__link{
    background: #010101!important;
    color: #ffffff !important;
}

#MobileNav{
    position: relative;
    top: -1px;
}

 

diego_ezfy_0-1626047137069.png


Kind regards,
Diego

 

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
AndreaRigoldi
New Member
5 0 0

Works a charm, thanks a lot!

0 Likes