Jump to content

Coding for Navigation Bar Highlight

Recommended Posts

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 comment
  • Replies 2
  • Views 452
  • Created
  • Last Reply
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 comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.