Menu from transparant to a fixed menu with a blue color when scrolling

[VS_Online_Media]

Hi there,

I have problem at the moment with the editing of the menu of my website. I would like to get a menu that first is transparant (I’m going to add an image at the top of each page) and when you scroll down the site, when the menu bar is out of the screen, the menu turns into a fixed menu with the color #1e73be. And I would like that the first menu has a logo and the second menu has a different logo.

I’m using WordPress theme X

I’ve been looking through the forums and documentation but so far haven’t found anything specific on this topic. I was hoping someone could provide me and possible others struggling with this with a solid solution.

Thank you so much.

[ruenel]

Hello Floris,

Thanks for writing in!

To make the navbar transaprent and with a solid background color as you scroll the page, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.home .x-navbar {
    background-color: transparent !important;
}

.home .x-navbar.x-navbar-fixed-top {
    background-color: #1e73be !important;
}

This code will only be applied to the homepage of your site.

Please let us know how it goes.

[VS_Online_Media]

Thank you for your help and your response.

When I applied these changed into my css it worked, but when I scrolled up to the top of my page the menu bar stayed in the color #1e73be. I’d like that when u u are at the top of the page again that the menu bar turns transparant again.

An example of what I mean you can find here: https://investorready.nl/

Thanks in advance,

Floris

[rad]

Hi Floris,

In that case, please add this code to your global custom javascript ( X > Theme Options > Global JS ).

jQuery ( function($) {

$(window).scroll ( function() {

if ($(this).scrollTop() <= 0) {

$('.home .x-navbar').removeClass('x-navbar-fixed-top');

}

} );

} );

Cheers!