Scroll down arrow button on slider combined with transparent header not aligning properly

Support
#1

Hi there,

I’m creating a website with a transparent header, using a single slide revolution slider as a background (at least on most pages). To create a transparent header that goes behind the nav and logobar I followed some instructions in another thread changing the margin-top of .x-slider-container.below to -165px. So far it’s all fine and dandy but when I insert a scroll down arrow button to tell the users to scroll down to the first section of the website, it scrolls down to the next section but it ends -165px too high, making the scroll stop about halfway through the section. Is there a way to control where the scroll stops? Meaning the top of the next section should be at the top of the screen.

Thanks in advance for the help!

Cheers,

Delana

#2

Hi Delana,

Thank you for writing in! Please remove the negative margin that you applied on the slider. And add this on X > Launch > Theme Options > CSS instead.

.home .masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

If that did not resolve the issue, please try this instead:

.home .masthead {height: 0;}

Hope it helps,
Cheers!

#3

Hi Friech,

Thank you, the last option resolved the issue with the scroll arrow. However, another issue now occurred. The mobile menu is now unfolding over the slider. That’s not gonna look good. The longer the menu will be, it will start unfolding on top of text etc. Is there a way I can make the mobile menu push the content down? It did in the other version I had but that caused problems with the scroll down arrow… Thank you in advance!

Best regards,

Delana

#4

Hi Delana,

If that is the case then we need to get the header out of slider when the page is viewed on mobile. Please update the previous given code to this:

@media (min-width: 978px) {
	.home .masthead {height: 0;}
}

Hope it helps,
Cheers!

#5

Worked like a charm, thanks!

#6

Glad it worked.

Cheers!