Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: affix (sticky content) margins

srjrol pro asked 7 years ago


I am attempting to use Bootstrap affix (sticky content) to stick the tabs below my navigation after scrolling. Each tab contains an iframe webpage. The tabs are sticking correctly but the margins are reset. Is there a way to keep the margins after it is stuck? Here is my example below. Thanks!

<!-- Bookmark Icon -->

&nbsp;

<!-- Font Awesome -->

<!-- Bootstrap core CSS -->

<!-- Material Design Bootstrap -->

<!-- Template styles -->

<!--Navbar-->

<nav class="navbar navbar-expand-lg navbar-light white fixed-top">
<div class="container"><a class="navbar-brand" href="support.html"><img style="height: 50px; padding: 5px;" src="img/products/example/example_logo.svg" alt="example" /></a>
<button class="navbar-toggler" type="button">

</button>
<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
 <li class="nav-item"><a class="nav-link" href="index.html"><i class="fa fa-home"></i>Home</a></li>
 <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-th-large"></i>Products</a></li>
 <li class="nav-item active elegant-color"><a class="nav-link" style="color: #fff !important;" href="#"><i class="fa fa-comments"></i>Support<span class="sr-only">(current)</span></a></li>
 <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-envelope"></i>Contact</a></li>
</ul>
<a class="nav-link" href="#"><button class="btn btn blue-gradient btn-rounded waves-effect btn-md" type="button"><i class="fa fa-download"></i> DOWNLOAD</button></a>

</div>
</div>
</nav><!--/.Navbar-->
<div style="height: 100px;"></div>
<!-- Nav tabs -->
<ul id="#support" class="nav nav-tabs nav-justified mx-auto sticky">
 <li class="nav-item"><a class="nav-link active" role="tab" href="#print-panel"><img style="max-height: 25px;" src="img/products/print/print_logo.svg" /></a></li>
 <li class="nav-item"><a class="nav-link" role="tab" href="#image-panel"><img style="max-height: 25px;" src="img/products/image/image_logo.svg" /></a></li>
 <li class="nav-item"><a class="nav-link" role="tab" href="#dm-panel"><img style="max-height: 25px;" src="img/products/dm/dm_logo.svg" /></a></li>
</ul>
<!-- Tab panels -->
<div class="tab-content card embed-responsive embed-responsive-1by1"><!--Panel 1-->
<div id="print-panel" class="tab-pane fade in show active" role="tabpanel"></div>
<!--/.Panel 1-->
<!--Panel 2-->
<div id="image-panel" class="tab-pane fade" role="tabpanel"></div>
<!--/.Panel 2-->
<!--Panel 3-->
<div id="dm-panel" class="tab-pane fade" role="tabpanel"></div>
<!--/.Panel 3-->

</div>
<!--Footer-->

<footer class="page-footer center-on-small-only elegant-color"><!--Footer Links-->
<div class="container-fluid">
<div class="row">

<!--First column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">example</h5>
<ul>
 <li><a href="#!">About</a></li>
 <li><a href="#!">Contact</a></li>
 <li><a href="#!">Case Studies</a></li>
</ul>
</div>
<!--/.First column-->

<hr class="w-100 clearfix d-sm-none" />

<!--Second column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">Image</h5>
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</div>
<!--/.Second column-->

<hr class="w-100 clearfix d-sm-none" />

<!--Third column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">Print</h5>
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</div>
<!--/.Third column-->

<hr class="w-100 clearfix d-sm-none" />

<!--Fourth column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">DM</h5>
<ul>
 <li style="list-style-type: none;">
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</li>
</ul>
</div>
<!--/.Fourth column-->

<!--Fifth column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">SSO</h5>
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</div>
<!--/.Fifth column-->

</div>
</div>
<!--/.Footer Links-->

<hr />

<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid"><a href="https://www.example.com"> example.com © 2018 </a></div>
</div>
<!--/.Copyright-->

</footer><!--/.Footer-->

<!-- SCRIPTS -->

<!-- JQuery -->

<!-- Bootstrap dropdown -->

<!-- Bootstrap core JavaScript -->

<!-- MDB core JavaScript -->

new WOW().init();

$(function () {
$(".sticky").sticky({
topSpacing: 90
, zIndex: 2
, stopper: "#support"
});
});

Marta Wierzbicka staff answered 7 years ago


Hi,

could you tell me what is the exact version of MDB you have and send me your files with your code to m.szymanska@mdbootstrap.com? I'll try to help you.

Best,

Marta



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags