Jump to content

Trying to replicate "Spotlight" navigation style in 7.1

Go to solution Solved by rog2e,

Recommended Posts

I am looking to upgrade my 7.0 site to a 7.1 site and temporarily copied the site to a free site in order to play with the changes.  I'm trying to recreate the Spotlight style navigation and for the most part I have it done except for 2 features. I put screenshots below. B

This is the 7.0 navigation bar:

image.png.f56757721b4994ff1a4032b2c0cc2a94.png

 

This is the 7.0 navigation bar when I hover over "ABOUT".  If you notice everything goes Opaque, including the menu items under "ABOUT." These menu items only turn solid when I hover over them. The "LIVE" menu item does not go opaque and stays solid always.  (This is basically what I am trying to achieve):

site2.png.0d1cd7071766fed6a14bdb0144af886b.png

 

 

This is what I am getting on my test  7.1 navigation bar when I hover over "ABOUT".  Everything goes Opaque but the menu items under "ABOUT" stay solid and "LIVE" goes opaque:

site3.png.e13451a070ba3b063a89696af6e8708f.png

1. How do I make the menu items underneath ABOUT also go opaque. I only want them to turn solid when I am hovering over them?

2. How do I make it so that "LIVE" is not affected by the opacity property. I basically want LIVE to always stay solid.

This is what I have so far in my Custom CSS:


// Spotlight Navigation Style//
.header-nav-list:hover > .header-nav-item {
  opacity: 0.3;
}
.header-nav-list:hover > .header-nav-item:hover {
  opacity: 1.0;
}

.header-nav-folder-content:hover > .header-nav-folder-item {
  opacity: 0.3;
}
.header-nav-folder-content:hover > .header-nav-folder-item:hover {
  opacity: 1.0;
}


//Pulled from 7.0 CSS. It made the LIVE blue but I don't see anything that will make it not opaque//

a[href^="/live"]{
       color: #7cb7c1 !important;
       font-weight: bold
}
 

 

 

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Incase someone needs it:

/* Reduce opacity of all top-level menu items and dropdown menu items */
.header-nav-list:hover .header-nav-item,
.header-nav-list:hover .header-nav-folder-content .header-nav-folder-item {
  opacity: 0.3;
}

/* Keep full opacity for the top-level menu item being hovered over */
.header-nav-list:hover > .header-nav-item:hover {
  opacity: 1.0;
}

/* Keep full opacity for the dropdown menu items being hovered over */
.header-nav-folder-content:hover .header-nav-folder-item:hover {
  opacity: 1.0;
}

/* Reduce opacity of the top-level menu item when hovering over its dropdown items */
.header-nav-folder-content:hover ~ .header-nav-item:hover {
  opacity: 0.3;
}
 

Link to comment

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.