:active (text link color while active)

Tagged: , ,

Author Posts

felipeaf November 22, 2020 at 4:27 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hi all,

I’m trying to set a text link to change the color while it is active.

I tried the pseudo class “:active”, but it didn’t change.

#menu-item .menu-link:active {
color: rgb(232, 250, 11);
background-color: rgb(244, 12, 12);
}


Sebastian November 22, 2020 at 9:35 am

Hey,

Would you mind sending me a link to the page? Also, can I just confirm what you mean by ‘active’, as there can be multiple meanings for this.

The :active pseudo selector takes effect for the brief moment while the user’s mouse is being clicked.

The menu link for the current page is also referred to as ‘active’ sometimes. The theme normally adds an extra class to the menu item for the current page. So you would target it using the following type of selector:

#menu-item .menu-link.current-menu-item {
color: rgb(232, 250, 11);
background-color: rgb(244, 12, 12);
}

Or more simply:

#menu-item .current-menu-item {
color: rgb(232, 250, 11);
background-color: rgb(244, 12, 12);
}

Does that make sense?

Thanks,
Sebastian

Sebastian November 22, 2020 at 9:37 am

P.S. if you really do want to be using :active, it is likely that the theme is overriding your Microthemer selector. So you could try setting !important on the color style. Or increasing the specificity score of your selector. See our tutorial on CSS specificity for more info.

felipeaf November 24, 2020 at 4:50 am

Hi Sebastian, thanks for answering me.

The page is not online, is local for now :/

I’ve tried both examples, and the !important setting is enabled, but no success.

What I want is, when you click a link, this current link change the color while you keep there.

Cheers!

Sebastian November 24, 2020 at 10:48 am

OK, so using :active is the right call. It’s hard to say exactly how to overcome this without viewing the site. But another thought I’ve had is to use :focus as well. So your selector would look like this:

#menu-item .menu-link:active,
#menu-item .menu-link:focus {
color: rgb(232, 250, 11) !important;
}

It’s possible the theme sets a focus color which you also need to override.

Cheers,
Sebastian

You must login or register to reply to this topic.