Debut header text color fix dropdown, please help!

Solved
Highlighted
New Member
12 0 0

Hi all

 

I have managed to change the header color and the icons in the header to white along with the text. But not for the dropdown. 

 

Please see screenshots and the code i inserted. 

 

I would like to change to last menu option to white and have a different hover color for the rest. I also want to be able to see the dropdown pages

 

Thanks for the help. 

Regardsheader fix.PNGIMG_5818.jpg

0 Likes
New Member
12 0 0

this is what it looks like in mobile. you cant see the hamburger when it clicked and you cant see the menu options 

 

mobile.PNG

0 Likes
Trailblazer
494 120 163

Hi, @cateringsup ,

This is Evita from On The Map.

 

Can you add your store URL? I need to check what kind of class name is in the dropdown menu.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
12 0 0

@OTM wrote:

Hi, @cateringsup ,

This is Evita from On The Map.

 

Can you add your store URL? I need to check what kind of class name is in the dropdown menu.

 

Best,
Evita


 

 

The store URL is 

 

catering-supplies-ie.myshopify.com

 

Thank you

0 Likes
Trailblazer
494 120 163

Add this code:

 

.site-nav--has-dropdown span{
color: #fff;
}
.site-nav__dropdown--left .site-nav__label {
color: #162950;
}

What did you mean about this - I would like to change to last menu option to white and have a different hover color for the rest?

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes

Success.

Hello 

.site-header__icon svg.icon.icon-close {
    fill: #fff;
}

For header,add below css in your theme.css file

.site-header a:hover,button.site-nav__link.site-nav__link--main.site-nav__link--button:hover {
    color: #FFA500;
}
button.site-nav__link.site-nav__link--main.site-nav__link--button {
    color: #fff;
}

For shop button dropdown hover,add below css in your theme.css file

.site-nav__dropdown a {
    color: #FFA500;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
New Member
12 0 0

@oscprofessional wrote:

Hello 

.site-header__icon svg.icon.icon-close {
    fill: #fff;
}

For header,add below css in your theme.css file

.site-header a:hover,button.site-nav__link.site-nav__link--main.site-nav__link--button:hover {
    color: #FFA500;
}
button.site-nav__link.site-nav__link--main.site-nav__link--button {
    color: #fff;
}

For shop button dropdown hover,add below css in your theme.css file

.site-nav__dropdown a {
    color: #FFA500;
}

 

Thank you. The desktop version is perfect but the mobile menu still only shows the "store" menu option and not the rest "Home" "About Us" "Contact" as seen in screenshot above of mobile version. 

0 Likes

For that please add below css

#MobileNav a {color:#162950;}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
12 0 0

@oscprofessional wrote:

For that please add below css

#MobileNav a {color:#162950;}

 

 

thank you so much you saved me a headache ! 

0 Likes
New Member
12 0 0

@OTM wrote:

Add this code:

 

.site-nav--has-dropdown span{
color: #fff;
}
.site-nav__dropdown--left .site-nav__label {
color: #162950;
}

What did you mean about this - I would like to change to last menu option to white and have a different hover color for the rest?

 


 

 

Thank you for your help! 

0 Likes