Header background when hovering

Daniel19901 · June 5, 2024, 9:42am

Hi,

hope someone can help me figure this out. The theme that I bought doesn’t have a white background once I hover above the main menu, can someone help me with this?

I want the background to turn white and the menu items black.

https://gh1m2aszl2h6wphx-69770084618.shopifypreview.com

Thank you in advance!!

Dev-Brad · June 5, 2024, 10:42am

Hey @Daniel19901

Bought themes usually have some setting within the theme customizer that will allow you to change the colour of the navigation menu? Alternatively you can add some custom CSS to the main CSS file

Let me know if i can help out further with this

sahilsharma9515 · June 5, 2024, 12:24pm

Hi @Daniel19901 Please add the code in your theme.css/base.css/style.css file which is available in your theme.

nav a:hover {
    background-color: white;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

Login in shopify admin.
Click on the Online Store.
Then click on the button next to Customize in live Theme.
Click Edit Code.
Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
You can add the above code at the bottom of the file.

Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

Daniel19901 · June 5, 2024, 12:59pm

@sahilsharma9515 thank you so much for giving me a hand but I meant having the whole header white. Would you be able to make this code, but for the whole header background ?

sahilsharma9515 · June 6, 2024, 5:08am

Hi @Daniel19901 I got you, Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.t4s-header__wrapper.t4s-pr.t4s-header-layout_logo_center.t4s-header-fullwidth.t4s-header-border-bottom_none.t4s-nav__hover_fadein:hover {
    background-color: white;
    --h-text-color: black;
}