rog2e

Solved it. Chat GPT is your friend lol!

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; }

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: 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): 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: 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 }