How can i show an up arrow when a link is active on my site?

I’m trying to get my site to show an up arrow when an img link is active (like on themeforest). but i’m having some issues getting the arrow to show up. Help!

http://dev.b2webdesign.com

here is what i’m adding to CSS, but it doesn’t show anything. I’m assuming either my CSS is wrong or my div classes are wrong in php

.r-top-icons a.active:after {
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid whitesmoke;
    border-top:none;
    height: 41px;
    width: 0;
    content:"";
    margin-left: -20px;
    position: absolute;
}
1 Like

In your source code, I don’t see any class of (.active) check your CSS class again.

i was testing and took it out of the style.css. I’ve added it back to style.css now so you can see it’s still not showing up. Any and all help is appreciated. It’s gotta be something simple i’m missing

Hi there,

Do you mean this?

image

yes. that is exactly what i mean.

Ok, try this:

a.r-top-icons:hover:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-top: none;
    height: 41px;
    width: 0;
    content: "";
    margin-left: -20px;
    position: absolute;
}

The arrow will show up when you hover over the icons:

image

that is for hover, i want it for active:after

like here
image

Aha, you’ll need to add a class to the icon that you want to have the “active” effect to distinguish it from the rest of the icons (the inactive ones)

image

and then target it with something like this:

a.r-top-icons.active:after {

}

so there isn’t a way to do that automatically based off of the link you click? it has to be set manually in the code?

I’m not an expert, but that’s the only way I’m aware of and that’s how it’s done on ThemeForest.

ok, thank you for your help. I’ll do it manually then.

1 Like