Styling the active state of menu links in Brine (7.0)
Today we’ll be addressing a quick CSS trick that you can implement on any Brine template, whenever you want to highlight even further your client’s ACTIVE menu links.
Let’s get to it, shall we?
Setting the default Active styling
Before we dive into the code, we need to have a way to target an Active link amongst all the rest in our navigation.
And the easiest way to do that is by selecting an option inside our Style Editor that produces a new class precisely for any active links in our header.
So, go ahead and look for the “Style” option for both your Primary and Secondary navigation (or just the Primary if you don’t have a Secondary one, or if the latter is set to inherit the styles of the former) and set that to “Active”.
In this step you can also add in the Active color you want your links to have.
Note: if you’re using the bottom navigation, make sure you set the Active color for both pages with a background banner and pages without it!
Troubleshooting active menu links in Brine
Now, before we move on, I want to address a common issue that pops up when using this Active state through our Editor.
It seems like this option doesn’t apply to pages inside your navigation (Primary or Secondary) that are Links.
To give you an example of what I mean, if we look through this example site and click on the different links, we can see that if we go to the Home page that’s been added as an Index inside my Primary Nav, the blue color of my Active state shows up without issues:
If we go to the Blog page that’s been added directly into the Primary Nav, we can also see that blue color over the menu link:
But, if we click on the Contact link that’s been added as a “Link” inside the Primary Nav, connecting to a page inside the “Not Linked Section”, the active color DOES NOT show up:
Unfortunately, I don’t have a workaround to share with you to fix this, so just keep it in mind when setting up the Active state on your client’s site and, whenever possible, add the actual pages into the navigation instead of creating Links between them.
Customizing Active menu links
Ok. Once you’re all set with the previous steps, we can go ahead and use our Inspect Element tool to look for the specific class that our Active elements are now given:
Alright, so our navigation link is an a element with a class of .Header-nav-item that’s common to all of our links, and an additional class of .Header-nav-item--active that specifically indicates which menu link is set to Active!
So, we’ll use that second one to add the extra styles we want to our blue links!
.Header-nav-item--active {
}
The last thing we need to do here is actually decide what we want to do with our link!
Personally, I just want to add a thin border below it to act as a nice little underline, so I’ll go with:
.Header-nav-item--active { border-bottom: 1px solid; }
Beautiful!
Here’s what that looks like for my Home and Blog pages in full screen:
So there you have it!
Now you know how you can easily target the Active state of your Brine links in order to add extra styles to them with CSS.
Until next time,
B.
Full code
.Header-nav-item--active { border-bottom: 1px solid; }
