Canvas Support

Sticky sidebar on bootstrap columns

3 replies·opened Jun 5, 2019
S
supermanageJun 5, 2019

Hello adding the sticky classes to bootstrap columns makes the content within thin, here's my code:

<div class="row">

<div class="col-lg-3 col-md-3 col-sm-12 d-none d-sm-block">
<div class="sidebar sticky-sidebar-wrap">
<div class="sidebar-widgets-wrap" id="main_column">
<div class="sticky-sidebar">
<ul class="list-group">
<li>first</li>
</ul>
</div>
</div>
</div>
</div><!-- end 1st -->

<!-- other html elements -->

</div><!-- end row -->

I've attached the file what it looks like.

S
SemiColonWebSTAFFJun 5, 2019

Hello,

The .sidebar Container cannot be used inside a Bootstrap Column since the .sidebar Container is itself a Column which has a defined width which is why the Width is messed up. Consider using the following code: 

<div class="row">

	<div class="col-lg-3 col-md-3 col-sm-12 d-none d-sm-block">
		<div class="sticky-sidebar-wrap">
			<div id="main_column">
				<div class="sticky-sidebar">
					<ul class="list-group">
						<li>first</li>
					</ul>
				</div>
			</div>
		</div>
	</div><!-- end 1st -->

	<!-- other html elements -->

</div><!-- end row -->

This should definitely work fine. Hope this Helps!

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

S
supermanageJun 6, 2019

Hey thanks for that, but that doesn't stick at all.

S
supermanageJun 6, 2019

But this worked:

<div class="col-lg-3 col-md-3 col-sm-12 d-none d-sm-block sticky-sidebar-wrap">
<div class="sticky-sidebar">
</div>
</div>

Thanks for clearing that up.

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