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":

image.png.59f7e917d0dc2ad74dcfe2df85674a6a.png

 

The default upon 7.1 upgrade was everything white with underlines.

I was able to get close with the following CSS:

/* HEADER NAV STYLES */
.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;
}
.header-nav-folder-content{
  background-color:hsl(114, 6%, 59%)!important
}
/* END HEADER NAV STYLES */

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

image.png.5d787d8501c76a0c7672cbc0772dfa9c.png

 

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.