Support » Theme: Elementare » Change Menu color on scroll

  • Hello,
    how can i change the manu background color from tranparent to whiteon scroll?
    So the menu background color should be transparent when the page is scrolled to top and if you scroll down the background color should change to white.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Theme Author CrestaProject

    (@crestaproject)

    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 http://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 months, 1 week ago by debritde.
    Theme Author CrestaProject

    (@crestaproject)

    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.

    Theme Author CrestaProject

    (@crestaproject)

    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.

    Theme Author CrestaProject

    (@crestaproject)

    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;
    }
    
    debritde

    (@debritde)

    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 🙂

    debritde

    (@debritde)

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

    • This reply was modified 5 months ago by debritde.
    Theme Author CrestaProject

    (@crestaproject)

    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;
    }
    
Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.