LPearlstine Posted January 21 Share Posted January 21 I have a small set of related pages that have their own secondary navigation to link them along the bottom of the header banner. The links work fine, and the hover effect works, but I am unable to get the link text buttons to style differently if it is the active page. html <div id="second-nav"> <div><h3><a href="/team-officers">Officers</a></h3></div> <div><h3><a href="/team-board">Board</a></h3></div> <div><h3><a href="/team-fellows">Fellows</a></h3></div> <div></div> <! extra div needed to correct centering of the last item > </div> CSS /* ** Secondary NAV ** */ #second-nav > div{ padding-right: 20px #second-nav { postion: absolute; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; } #second-nav h3{ background-color:#8EA98B; top: 0px; padding: 0px 4px 4px 12px; width:100%; z-index:1000 !important; box-shadow: 4px 4px 7px rgba(0,0,0,0.4) } #second-nav h3 a{ color:white !important; font-size:15px; } #second-nav a:hover{ color:white !important; opacity:0.6; } I have tried many variations of this unsuccessfully #second-nav active a{ color:#3d4635 !important; } Thank you. url: https://www.conservenassau.org/team-officers password: see2theSea@dawn Beyondspace 1 Link to comment
Beyondspace Posted January 22 Share Posted January 22 (edited) On 1/21/2023 at 10:57 AM, LPearlstine said: I have a small set of related pages that have their own secondary navigation to link them along the bottom of the header banner. The links work fine, and the hover effect works, but I am unable to get the link text buttons to style differently if it is the active page. html <div id="second-nav"> <div><h3><a href="/team-officers">Officers</a></h3></div> <div><h3><a href="/team-board">Board</a></h3></div> <div><h3><a href="/team-fellows">Fellows</a></h3></div> <div></div> <! extra div needed to correct centering of the last item > </div> CSS /* ** Secondary NAV ** */ #second-nav > div{ padding-right: 20px #second-nav { postion: absolute; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; } #second-nav h3{ background-color:#8EA98B; top: 0px; padding: 0px 4px 4px 12px; width:100%; z-index:1000 !important; box-shadow: 4px 4px 7px rgba(0,0,0,0.4) } #second-nav h3 a{ color:white !important; font-size:15px; } #second-nav a:hover{ color:white !important; opacity:0.6; } I have tried many variations of this unsuccessfully #second-nav active a{ color:#3d4635 !important; } Thank you. url: https://www.conservenassau.org/team-officers password: see2theSea@dawn Do you mean that it will show different style for this second nav which is based on the page you are in? It may require js to identify which page we are in so we need at least the business plan or above. Is it possible for you? Edited January 22 by Beyondspace Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
LPearlstine Posted January 22 Author Share Posted January 22 Yes, I'd like it to identify the page it's on and yes we have the business plan. I'm surprised I can't just id the link in CSS as active. Thanks for having a look! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment