Reply To: Sticky element

August 7, 2020 at 10:27 pm #10034082
Support
Keymaster

Hello Nicolas,

There’s a simple sticky code on Porto Admin that with some customization we can do that. Please follow the steps below:

Using as base the layouts-default.html:

1) Add the custom code below after the .page-header section:

<section role="main" class="content-body">
	<header class="page-header">
		<h2>Default Layout</h2>
	
		<div class="right-wrapper text-right">
			<ol>
				<li>
					<a href="index.html">
						<i class="fas fa-home"></i>
					</a>
				</li>
				<li><span>Layouts</span></li>
				<li><span>Default</span></li>
			</ol>
	
			<a><i class="fas fa-chevron-left"></i></a>
		</div>
	</header>

	<!-- start: page -->
	<div class="custom-sticky-wrapper">
		<div class="custom-sticky-wrapper-body">
			<div class="row">
				<div class="col">
					<div class="card">
						<div class="card-body">
							<p class="mb-0">Lorem ipsum dolor sit a met. </p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="row">
		<div class="col-lg-6 mb-3">

2) Change the html tag to:

<html class="fixed simple-sticky-header-enabled" data-sticky-header-distance="40">

* data-sticky-header-distance="40" is the distance in pixels to activate the sticky header when scroll down the page.

3) Add in (css/custom.css):

/* The height should be the same as initial parent (the purpose is prevent a "flick" when sticky is active) */
.custom-sticky-wrapper {
	height: 84px; /* Change this value according your content size */
}

html.simple-sticky-header-active .custom-sticky-wrapper .custom-sticky-wrapper-body {
	position: fixed;
    width: 100%;
	top: 115px;
	left: 300px;
    z-index: 30;
}

html.sidebar-left-collapsed.simple-sticky-header-active .custom-sticky-wrapper .custom-sticky-wrapper-body {
	left: 75px;
}

We hope this helps!

Please note that is not a definitive solution, but probably should be a good start for you!

Kind Regards,

Rodrigo.

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads