Jump to content

NAV STYLES: Problem with Active State in Drop-Down Navigation Folder Items

Recommended Posts

Updating on 7.1 at https://www.wholesystemsdesign.com/

I am trying to emulate the navigation styles (colors) we had on our 7.0 site shown below. As an example this represents the ACTIVE STATE (yellow) of the nav link(s) if a user is on the "apprenticeship" page if you were to hover on "courses":



The default upon 7.1 upgrade was everything white with underlines.

I was able to get close with the following CSS:

.header-nav-item--active a {
    background: none !important;
  	text-decoration: none !important;
	color: hsl(46, 60%, 60%) !important;
.header-nav-item a:hover {
    color: hsl(46, 60%, 60%) !important;
	transition: all 0.3s ease;
  background-color:hsl(114, 6%, 59%)!important

Which results in this appearance when a user is on the "apprenticeship" page:



As you can see, all links under active "courses" are shown as active state, and the underline is forced back in.

What am I missing?


Link to comment
  • Replies 1
  • Views 612
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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

  • 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.