Change Menu color on scroll

Hi @debritde
can you link your website?
The color of the menu changes automatically during the scroll (get the background color set in the theme settings).

Hi @crestaproject,
The website is https://hrtbeat.de/eventmanagement
Where can I change the color in the theme options?
Or is it an Pro feature? If yes, how to archive this with css only??

• This reply was modified 5 years, 5 months ago by debritde.

Hi @debritde
I tried to visit your website but I get an error.

You can change the colors from your WordPress Dashboar under “Appearance-> Customize-> Elementare Theme Options-> Theme Colors”
Here you can change the theme colors divided into sections.

Hi @crestaproject,
Sorry, it was the wrong link. I edited it.
I can choose HEX Values there but no rgba.
I want to have a transparent menu on top and when I scroll it should get a white background.
In the color section I can only choose the background color and no background color on scroll…

@crestaproject Also the header section in color settings is not changing anything in the menu.

Hi @debritde
I see that you are using the “full width page template”, that template is used for page builders and some options are not available.
Anyway, you can use this CSS code for the header transparent:

body header.site-header.noImage {
    background-color: rgba(255,255,255,0.6) !important;
}
body header.site-header.menuMinor.noImage {
	background-color: rgba(255,255,255,1) !important;
}

Hi @crestaproject,
That works thank you! ??

How can I change the Logo and the hamburger menu color after scroll?
So that I can use another logo before and after scroll, to use a white logo on top and a black logo after scroll and the same with the colours of the hamburger menu.

Hi @debritde
Changing the logo unfortunately is not possible (you should create a child theme and change the theme header).
Instead, regarding the color of the hamburger menu you can use this CSS code:

header.site-header .hamburger-menu .hamburger-inner,
header.site-header .hamburger-menu .hamburger-inner:after,
header.site-header .hamburger-menu .hamburger-inner:before {
	color: #ffffff;
}
header.site-header.menuMinor .hamburger-menu .hamburger-inner,
header.site-header.menuMinor .hamburger-menu .hamburger-inner:after,
header.site-header.menuMinor .hamburger-menu .hamburger-inner:before {
	color: #000000;
}

Thank you!
Is there a way to implement the logo change function in the next update?
A class which changes on scroll would be enought if anything else would be to much effort ??

@crestaproject The color changing for the hamburgermenu is not working, can you please have a look again ??

• This reply was modified 5 years, 5 months ago by debritde.

Hi @debritde
you’right, I used “color” insted of “background-color”, please use this code:

header.site-header .hamburger-menu .hamburger-inner,
header.site-header .hamburger-menu .hamburger-inner:after,
header.site-header .hamburger-menu .hamburger-inner:before {
	background-color: #ffffff;
}
header.site-header.menuMinor .hamburger-menu .hamburger-inner,
header.site-header.menuMinor .hamburger-menu .hamburger-inner:after,
header.site-header.menuMinor .hamburger-menu .hamburger-inner:before {
	background-color: #000000;
}