My nav bar turns dark grey when I hover over it, turning nav bar items black/invisible

Hi,

I’m pretty new to both the coding and Shopify world so just bear with me.

My nav bar is transparent with white text and it works perfectly until I hover over it, triggering a dark grey dropdown header that turns all of my nav bar items black (except my logo) and, subsequently, invisible to the user. My objective is to either a) disable the dropdown nav bar effect altogether OR b) make my nav bar text stay white and visible regardless of the header color.

I’ve tried troubleshooting this with code but nothing seems to be working. Here’s the link to my site: https://ox3vpte3fhgtfnc2-56759025742.shopifypreview.com

If someone could help me out with this, I’d be greatly appreciative. Thanks in advance!

Hi @atticuseby

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.site-header__background {

background: transparent !important;

}

span.navtext {

color: white !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like

Thank you! That fixed the initial problem, but now the underline effect for each nav bar item is still black and hard to see. How do I go about fixing this?