Scroll offset slider

5 replies·opened Apr 24, 2016
J
JulianvdgApr 24, 2016

Hi Support team,

I started out with the "app-showcase page". But I added a top bar from another page. Looks great but when I scroll down there is a gap between the slider and the menu. As the slider starts going up when the scroll reaches the top of the navigation. I would like the slider to scroll up immediately, to remove the gap between the slider and the navigation.

S
SemiColonWebSTAFFApr 26, 2016

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

S
SemiColonWebSTAFFApr 26, 2016

Hello,

We have just checked out your Website and the issue is that the .slider-parallax-inner Container is not currently supported with the Header + Top Bar Combination but only with Transparent Headers. So please remove it .slider-parallax-inner Container from your #slider Element and this issue will be automatically resolved. So replace your existing #slider Code with the following:

<section id="slider" class="slider-parallax" style="height:800px">
	<div class="container clearfix">

		<div class="hero-intro no-fade">
			<div class="col-md-12 dark center nobottommargin" data-animate="fadeIn">

				<div class="emphasis-title">
					<h1>Je auto <span id="js-rotating">makkelijk, snel, goed, professioneel</span> laten wassen</h1>
				</div>

			</div>

			<form action="" method="post" id="postcode-form" novalidate="novalidate">
				<div class="row">
					<div class="col-xs-5 col-md-offset-2 dark center nobottommargin" data-animate="fadeIn">

						<input type="text" id="postcode" name="postcode" maxlength="6" required>
					</div>
					<div class="col-xs-5">
						<a href="javascript:void(0)" id="postcodeCheck" class="button button-3d button-large button-rounded button-wyper">Check Postcode</a>
					</div>
				</div>
			</form>
			<div class="col-xs-5 col-md-offset-2" id="errorBox"></div>

		</div>

	</div>
</section>

Let us know if we can help you with anything else or if you find any further issues.

J
JulianvdgApr 26, 2016

This fixed it ;) Thanks for your help guys! Awesome template btw!

S
SemiColonWebSTAFFApr 26, 2016

Hello,

Really Glad that your issues were resolved. Really Happy to Help! Thank You so much for the Kind Words. :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard