Navigation Bar Styling for Active Page

[henzeldesign]

Hello,

In the header navigation, how do I make the word for the active/current page name, “Home” in this case, blue. Right now it appears blank or white.

Here is the page in progress:
https://www.kayerose.com/DEV2025/

Note, this is the existing site for the nav bar reference:
https://www.kayerose.com

I am recreating a client’s existing webpage which uses the Porto Responsive HTML5 v 6.1.0 theme with the new v 12.1.0 theme. They want it to look as close to the existing as possible.

Thanks!

---

Template Version: 12.1.0

[Support]

Hello, you can use this css for that:

(css/custom.css)

@media (min-width: 992px) {
    #header .header-nav.header-nav-stripe nav > ul:not(:hover) > li > a.active {
        color: #003996 !important;
    }
}

Kind Regards.

---

[henzeldesign]

Thank you! That styled the color.

Note that the hover state still gave me a white text. So, I changed the color in the theme.css file:

#header .header-nav.header-nav-stripe nav > ul > li:hover > a.active {
color: #ac8954 !important;
}

This appears to work for me now. Just wondering if this is the right place for this styling, as I couldn’t get it to work in the custom.css file.

https://www.kayerose.com/DEV2025/

Thank you!

---

[Support]

Hi,

To change the hover color on active elements you can use this:

@media (min-width: 992px) {
    #header .header-nav.header-nav-stripe nav > ul:hover > li:hover > a.active {
        color: #003996 !important;
    }
}

Regarding the css file, make sure the css is valid, I checked your custom.css file and looks like there are some problem.

Example:

* Missing “}” to close the media query.

Check the entire file.

We don’t recommend changing theme.css file, use custom.css only.

---

[henzeldesign]

Thank you! I was able to update the custom.css where I also cleaned up the code. Much appreciated.

---

[Author]

Posts