Docs

[AMBESTENGESTERN]

Hi, i also want to have the navbar over the slider. I tried some things that i found in the forum but nothing really works. The slider should be full size and the navbar on top (something like this for example: http://www.polder-events.nl/). If the page is scolled down it should be fixed at the top and getting and the background should get dark. But this should only be on the “home” page. Is it possible to have a different logos (white / black) and navigation text color (white / black) for homepage and the other pages?

It would be great if you could help me.

[Thai]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[AMBESTENGESTERN]

This reply has been marked as private.

[Christopher]

Hi there,

Please enable ‘Fixed top’ position from Customize -> Header.

Please add following code in Customize -> Custom -> JavaScript :

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("colored");
		} else {
			$('.x-navbar-fixed-top').removeClass("colored").addClass("transparent-navbar");
		}
	});
});

Please add following code in Customize -> Custom -> CSS :

.home .x-slider-container.below {
    margin-top: -125px;
}
.home .x-navbar-fixed-top.transparent-navbar{
background-color:transparent;
}
.home .x-navbar-fixed-top.colored{
background-color:red;
}

.home .x-nav li a{
color:#fff;
}

To change home page logo add this JS too :

jQuery(".home .x-brand.img img").attr("src","ADD LOGO URL HERE");

Hope that helps.

[AMBESTENGESTERN]

Thank you very much!
That’s what i have searched for, now it looks like it should.

My next problem is, that i would like to have the first “section” beeing over the slider. The silder should be in the background. So i have to move the first section up. Is it possible using CSS? I didn’t find anything helpful yet.

Would be great if you could help me.
I’ll send you a screenshot of the layout, like it should look.

Cheers

[AMBESTENGESTERN]

This reply has been marked as private.

[AMBESTENGESTERN]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. You can select the section and set a negative margin by adding margin-top: -400px; to the Style field.

You can also try adding CSS on page level CSS or Customizer > Custom > CSS :

.home #x-section-1 {
  margin-top: -400px !important;
}

Let’s adjust the value if needed.

Hope this helps.

Cheers!

[AMBESTENGESTERN]

Thanks for your quik help. It works really good!

[Christopher]

You’re most welcome.

[Author]

Posts