Docs

[KB-WFW]

Hi X-theme suport.

I an looking to have a background color (actually a transparency) that is different than the rest of the navigation on desktop. But since this is a one page navigation, i can’t seem to affect the active item I.e. the one I clicked on instead of all of the navigation items

Right now it’s just a blank slate : http://cbi.worryfreeweb.ca/

But what I am trying to achieve is as in the attached file.. I am not worried about the background image for now, I just need to see if this is possible.

1. Hover changes transparency hue
2. Active changes transparency hue

thanks in advance.

Craig

[Rupok]

Hi Craig,

It’s tough to understand what you are looking for based on your screenshot because it’s too low res. Can you provide the example site you are trying to mimic?

Thanks!

[KB-WFW]

Hi Rupok,

Sorry it’s not clear. Basically I need to have a transparency over the navbar background image that changes when you hover or is in the active link.. Since it’s a one page set up I thin the active link will be all the menu items at once ??

See attached. Hope it helps

[KB-WFW]

here, try this one.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    color: hsl(0,0%,80%);
    background: rgba(10, 28, 243, 0.48);
}

And then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-nav li').each(function(){
		$(this).removeClass('current-menu-item');
	});
	
	$('.x-nav li').click(function(){
		$('.x-nav li').each(function(){
			$(this).removeClass('current-menu-item');
		});
		$(this).addClass('current-menu-item');
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[KB-WFW]

This is great.. I’ll try once I have the background image and play with colors .

Appreciate the quick guidance.

X theme rocks (AND so do the support team) !!

[Nico]

Let us know how it goes

Thanks.

[Author]

Posts