Change color of menu on scrolling, exclude sub menu

[adrian.cares]

Hey there,

I use the following JS to change the menu background color from transparent to white and the menu text from white to black:

jQuery(function($) {
	$(window).scroll(function() {
		if ($(window).scrollTop() > 400) {
			$('.x-navbar').addClass("x-navbar-solid");
      $('.x-navbar a').css("color", "#000");
      $('.x-brand img').attr('src','https://elmar-rassi.com/wp-content/uploads/ER-logo-black.svg');
      $('.mobile').css("background-color", "transparent");
		} else {
			$('.x-navbar').removeClass("x-navbar-solid");
			$('.x-navbar a').css("color", "#fff");
      $('.x-brand img').attr('src','https://elmar-rassi.com/wp-content/uploads/ER-logo-white.svg');
      $('.mobile').css("background-color", "rgba(0,0,0,0.95)");
		}
	});
});

The CSS code of the added classes:

.x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}
 .x-navbar-solid {
     background-color:rgba(255, 255, 255, 0.95);
     transition: background-color 0.5s ease; 
}

The challenge
The sub menu items are affected by the color change as well. I don’t want the sub menu items be affected by this color change, but the rest of the navigation. Please find the attached short video.

How can I specify that the color change in x.navbar a is not affecting the sub menu items?

Link to site + further infos in the private note.

Thank you.

Best
Adrian

[Joao]

Hi There,

Please add the following lines to X > Theme Options > CSS

.sub-menu li a {
color: black !important;
}

Hope it helps!

[adrian.cares]

@Joao

.sub-menu li a {
color: black !important;
}

Thanks Joao,
close.
With your solution the font also remains black on the mobile menu. Can this code be further specified?

Thank you.

[Prasant]

Hello @adrian.cares,

Thanks for updating.

Please add following CSS in theme options panel and let us know how it goes:

.x-navbar .mobile .x-nav li>a {color: #fff !important;}

I have taken a screenshot as how to output should look. https://screencast.com/t/ZifMZBBfrmxy

Thanks.

[adrian.cares]

@Prasant

.x-navbar .mobile .x-nav li>a {color: #fff !important;}

Thx Prasant,

that just causes a “white on white” - case during the down scroll.

The CSS is adjusted while scrolling and adds or removes additional CSS classes. Can you advise?

Thank you so much.

Best
Adrian

[Joao]

Hi there,

Replace the code I provided with:

.x-navbar .desktop .sub-menu li a {
color: black !important;
}

Remove the code provided by Preasant

Hope it helps!

[adrian.cares]

Hey Joao,

thank you so much. That worked.
A tiny little tweak at the end:
What’s the correct CSS class to apply a text-align: left to all sub menu items on mobile?

[thai]

Hi There,

Please also add this custom CSS:

.x-navbar .mobile ul.sub-menu > li > a {
    text-align: left;
}

Let us know how it goes!