Search code examples
csswordpressmenupseudo-class

The pseudo-class (:active) does not work for the menu of my Wp theme

I bought a theme (HelpGuru) and I have a problem with the css of menu . I contact the support but they can not help me. They simply directed me to a company that personalizes wordpress themes. Here is the link of : https://demo.herothemes.com/helpguru/

I would like the menu to indicate the tab corresponding to the displayed page. For example : when I am on "Home page" display the link "HOME" of the underlined menu or in another color. Normally we use the pseudo-class :active. But it does not work. i looked on the internet, I saw that there was an possibility to do this by Php.

Is it possible to do that by CSS and how?

Thank you so much for your help. Best regards. Zed

screenshot

Solution

  • So I checked out the website, in the menu, the link of the page that is active has the class current-menu-item, hence you can use this class and styles.

    Below are two methods to add underline effect.

    .current-menu-item{
    text-decoration:underline;
}

    OR

    .current-menu-item{
    border-bottom:1px solid #ffffff;
}