Highlight Current Page/Folder in Navigation Bar - Brine

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?

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?

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?

It seems that you have figured it out, right?

On 10/27/2022 at 9:11 AM, bangank36 said:

It seems that you have figured it out, right?

Yup! Thank you

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

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

1 hour ago, Williamson45675 said:

What a brilliant approach! I'll be implementing this right away.

Glad I could help! Let me know how it works out 🙂