Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Coding for Navigation Bar Highlight


MeggKix

Question

Site URL: https://nourishbytara.com

Hi. I am having trouble getting my navigation bar coding correct. I added coding so when you hover over the navigation options it highlights them green and changes the font to white. However, once you select a category, when you hover over the items in the drop down in that category it changes the font from white to black. If you hover over adjacent categories that you have not selected the white font works. It is only once you are within a particular category that it does not work. I have attached images. It is difficult to explain. I would like for the font to remain white. 1868732923_ScreenShot2020-10-21at6_36_25PM.thumb.png.1829e0bfa21f94a6e20dd420f9b4f9af.png1562996623_ScreenShot2020-10-21at6_35_43PM.thumb.png.b0c154ff75431d6bc49af7376b962ec3.png347834487_ScreenShot2020-10-21at6_35_56PM.thumb.png.9aea45f49cc8e78bcf9f690a38229bef.png

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0
6 hours ago, MeggKix said:

Site URL: https://nourishbytara.com

Hi. I am having trouble getting my navigation bar coding correct. I added coding so when you hover over the navigation options it highlights them green and changes the font to white. However, once you select a category, when you hover over the items in the drop down in that category it changes the font from white to black. If you hover over adjacent categories that you have not selected the white font works. It is only once you are within a particular category that it does not work. I have attached images. It is difficult to explain. I would like for the font to remain white. 1868732923_ScreenShot2020-10-21at6_36_25PM.thumb.png.1829e0bfa21f94a6e20dd420f9b4f9af.png1562996623_ScreenShot2020-10-21at6_35_43PM.thumb.png.b0c154ff75431d6bc49af7376b962ec3.png347834487_ScreenShot2020-10-21at6_35_56PM.thumb.png.9aea45f49cc8e78bcf9f690a38229bef.png

So you want the text to remain white even on hover? Or are you wanting something different?

Link to post
  • 0

Remove or comment out your last two rule sets in your CSS and add the following.

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-folder-content a:hover {

  color: white;
  
  }

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-folder-content .header-nav-folder-item:hover {

  background-color: #445751;
  
  }

This is for a v7.1 site.

When you put the above CSS in, the active link will be off white but not black.

If you still want to change the active link color then add the following.

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-wrapper .header-nav-item--active a {

  color: #4a412b;

  }

Change the color to suit.

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...