How to style active nav item?

Wappler General Need Help
1

Hey all,

I can overwrite the BS5 stylesheet easy enough for :hover but when a user is on a certain page that the nav menu item refers to, I’d like this to show as the active color.

I can’t seem to find any CSS that achieves this. I’ve found some code online that uses JS but I would assume this is possible to do this without?

Essentially what I’m trying to achieve.

Nav menu items - change default color to ‘muted’. Then when hovered to a blue, and when active the same blue.

I’ve tried a few variations, the following works for hover but not active with ‘.navlm’ being my custom class I’m adding to the nav items. I’ve tried to be more specific with ids too but no luck:

.navlm a:active {
color: #011FFD!important;
}

.navlm:hover {
color: #011ffd!important;
}
2

I always have to refer to css selector cheat sheet:

https://www.w3schools.com/cssref/css_selectors.asp

3

Thanks @mebeingken - I’ve trawled through w3schools, stackoverflow and the like - but no variation seems to generate the desired output!

4

What is the code used for your side menu? If it’s a nav component the Bootstrap navigation js file will automatically set the class .active to the nav item, corresponding to the current page.
When you inspect your element using browser dev tools do you see an active class assigned to it?

5

Hey Teo!

.active is assigned to the nav menu item when I am on the page matching the nav item.

The side menu is ineed a nav component, but I can't seem to overwrite the .active to appear as a color.

6

So what element are you applying your custom class to and what is your menu code exactly? Can you paste the code here as i can’t just guess where did you apply the class and what is your code (still don’t have a crystal ball)?

7

I’ve been applying the custom class to the nav item specifically.

Here is the nav code:

    <div class="nav mt-3 justify-content-center" style="max-width: 100%; width: 100%;">
              <a class="nav-item nav-link text-center ps-0 pe-0 small navlm" href="search" style="width: 100%; max-width: 100%; font-size: 8px;" internal><i class="fas fa-search fa-3x" style="width: 100%;"></i><span
                  style="font-size: 10px;">Search</span></a>
              <a class="nav-item nav-link text-center ps-0 pe-0 small navlm text-muted" href="search/lists" style="width: 100%; max-width: 100%;" internal><i class="far fa-address-book fa-2x" style="width: 100%;"></i><span style="font-size: 10px;">B2B
                  List</span></a>
              <a class="nav-item nav-link text-center ps-0 pe-0 small navlm text-muted" href="contact-finder" style="width: 100%; max-width: 100%;" internal><i class="fab fa-searchengin fa-2x" style="width: 100%;"></i><span
                  style="font-size: 10px;">Instant
                  Finder</span></a>
              <a class="nav-item nav-link text-center ps-0 pe-0 small navlm text-muted" href="enrichlists" style="width: 100%; max-width: 100%;" internal><i class="fas fa-file-csv fa-2x" style="width: 100%;"></i><span style="font-size: 10px;">Enrich
                  CSV</span></a>
              <a class="nav-item nav-link text-center ps-0 pe-0 small navlm text-muted" href="integrations" style="width: 100%; max-width: 100%;" internal><i class="fas fa-bolt fa-2x" style="width: 100%;"></i><span
                  style="font-size: 10px;">Integrations</span></a>
              <a class="nav-item nav-link text-center ps-0 pe-0 small navlm text-muted" href="getting-started" style="width: 100%; max-width: 100%;" internal><i class="far fa-play-circle fa-2x" style="width: 100%;"></i><span
                  style="font-size: 10px;">Getting
                  Started</span></a>
            </div>

This nav sits within a column, that sits within a row that sits in the main container for the page.

No custom classes or styling to the column or container.

1 Like
8

So you need to target:

.navlm.active {
    color: #fff;
}

Replace the value of the color with your own.

9

Teo you make everything seem so simple. I tried literally every variation, except this one. Thank you as always.

1 Like
10

I think once you understand how CSS selectors “work” it will also be simple for you. The link that Ken provided is really useful if you are not sure how to target a specific element.