Jump to content

Highlight Current Page/Folder in Navigation Bar - Brine

Recommended Posts

Site URL: https://www.theenrichededucator.org/

Hello, I am trying to figure out some CSS that will highlight the appropriate item on my header/navigation bar with a visitor is currently on one of the pages in the folder. I have switched the Style Editor setting to "Active" already. This works for regular pages in my navigation bar; turns the item from Red font to Black font when the visitor hovers and/or is currently on the page. However, this effect does not work when the visitor is on a page within a folder; the hover effect works but the Navigation Item doesn't stay in Black font. I should note that the pages within my dropdown folders are links to non-linked pages in my site. 

I am using Brine 7.0 and have some basic/intermediate knowledge of CSS. 

My ideal outcome would be (using the screenshot below):

  1. The visitor is currently on the HOME page, which in the nav bar "HOME" is in Black font.
  2. The visitor is also currently hovering over "WHO WE ARE", which is also in Black font on the nav bar.
  3. Currently, what happens when the visitor clicks on "OUR TEAM", the visitor will be taken to that folder link (which is an anchor text within a non-linked index page) and the nav bar item "WHO WE ARE" stays in Red font. What I'd like to happen when the visitor is on this page (and others like it) is for the nav bar item to be in Black font.

Is this achievable with some CSS?

Screen Shot 2022-02-19 at 11.49.32 AM.png

Edited by EnrichedEducator
pressed enter on accident and wasn't done crafting my post.
Link to comment
  • 8 months later...

hey, I seem to have the same problem you were writing about. I tried CSS with this code

/* nav active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
    color: #1cc700 !important;
}

It does not work with my page. Did you find another solution?

Link to comment
On 2/19/2022 at 11:39 PM, EnrichedEducator said:

Site URL: https://www.theenrichededucator.org/

Hello, I am trying to figure out some CSS that will highlight the appropriate item on my header/navigation bar with a visitor is currently on one of the pages in the folder. I have switched the Style Editor setting to "Active" already. This works for regular pages in my navigation bar; turns the item from Red font to Black font when the visitor hovers and/or is currently on the page. However, this effect does not work when the visitor is on a page within a folder; the hover effect works but the Navigation Item doesn't stay in Black font. I should note that the pages within my dropdown folders are links to non-linked pages in my site. 

I am using Brine 7.0 and have some basic/intermediate knowledge of CSS. 

My ideal outcome would be (using the screenshot below):

  1. The visitor is currently on the HOME page, which in the nav bar "HOME" is in Black font.
  2. The visitor is also currently hovering over "WHO WE ARE", which is also in Black font on the nav bar.
  3. Currently, what happens when the visitor clicks on "OUR TEAM", the visitor will be taken to that folder link (which is an anchor text within a non-linked index page) and the nav bar item "WHO WE ARE" stays in Red font. What I'd like to happen when the visitor is on this page (and others like it) is for the nav bar item to be in Black font.

Is this achievable with some CSS?

Screen Shot 2022-02-19 at 11.49.32 AM.png

It seems that you have figured it out, right?

image.thumb.png.ec0bd441f470446f4e52715ee2153d3d.png

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, Keyword Highlighter
If 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
  • 2 weeks later...
On 11/9/2022 at 7:30 PM, kernholz said:

hey Could you tell me by any chance which code you used? that would be very helpul for us. Thank youuu

What is your site url? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.