Active background image in header

[arngabus]

Hi,

I have content with background images in my header and they are like link-menu (anchor link)

When the corsor is hover, the image change of color. is perfect but how I do for keeping the color when the link is active?

Thank you

[lely]

Hi Gabus,

I can see you have both X and Pro licenses. We might need to see your setup to come up with a better recommendation. We need to see how you create this content first. Did you actually use a button element? Please share the specific URL of the page so we can see how it is setup. Thank you

[Gabus]

Hello Lely,

Thank for your answer. It’s a pro license

No, I don’t use a button element. Juste a transparent image with background in CSS.

Let’s see my page: (header in footer): [https://dufaux-transports.ch/transports-assistance/#vegetaux]

I would like to create an active link with image (the image stay green) when active

#img_vegetaux:hover, #img_vegetaux:hover img {
background: url(https://dufaux-transports.ch/wp-content/uploads/2019/10/vegetaux.png) no-repeat;
transform: scale(1.1);
background-size: cover;
background-color: #ffffff;
}

Thank you very much

[albrecht]

Hi @gabus

To achieve that you need to add an ID to the section with the menu, lets say transportation_links. After that please update the custom css, add .active to the hover style. So the css would look like:

#img_vegetaux:hover, #img_vegetaux:hover img, #img_vegetaux.active img, #img_vegetaux.active {
    background: url(https://dufaux-transports.ch/wp-content/uploads/2019/10/vegetaux.png) no-repeat;
    transform: scale(1.1);
    background-size: cover;
    background-color: #ffffff;
}

After that we need to add a custom JS so that when the image is clicked, it will have the active class and at the same time remove the active class in other links.

jQuery(document).ready(function($) {
  
  $('#transportation_links .x-image').click(function(e) {
		$('#transportation_links .x-image').removeClass('active');
		$(this).addClass('active');
	});

})

Please let us know how it goes.

We really want to help you out more but this is outside of our support scope.