rog2e Posted February 27 Posted February 27 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 }
Solution rog2e Posted February 28 Author Solution Posted February 28 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; }
tuanphan Posted March 2 Posted March 2 Have you solved it or still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment