Topic: An affixed double-navbar
adlib
pro
asked 7 years ago
It's about double-navbar layout.
I'm trying to set up one more horizontal bar (on the top of the "double-navbar"), which should be hidden after scrolling. And I did that. But cannot fix the right positions to the icons before and after scrolling - they are not at the same place.
CSS for .affix, .affix-top, and .affix-bottom?
<header>
<!-- *** TOP *** -->
<div id="top">
<div class="container-fluid" style="background-color:#222222;color:#fff;height:38px; padding-left: 240px;">
<p style="padding-top: 2px;">Feel free to contact us</p>
<ul class="list-inline pull-right">
<li> <a href="#" title="FR"><img src="img/flags/new/fr.png" /></a> </li>
<li> <a href="#" title="UK"><img src="img/flags/new/uk.png" /></a> </li>
</ul>
</div>
</div> <!--/. Top -->
<!-- *** NAVBAR *** -->
<nav class="double-navbar navbar stylish-color-dark z-depth-1" data-spy="affix" data-offset-top="38" data-offset-bottom="200" role="navigation">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a href="#"><i class="fa fa-bars"></i></a>
<div class="breadcrumbs smooth-scroll hidden-xs hidden-sm">
<h6><a href="#top">Home</a></h6>
</div>
</div>
<ul class="list-inline pull-right text-center">
<li><a href="#"><i class="fa fa-shopping-cart"></i><br><span>Cart</span></a></li>
<li><a href="#home"><i class="fa fa-map"></i><br><span>Shop</span></a></li>
<li><a href="blog.html"><i class="fa fa-book"></i><br><span>Blog</span></a></li>
<li><a href="#"><i class="fa fa-envelope"></i><br><span>Contact</span></a></li>
</ul>
</div>
</nav>/ <!--/.Navbar-->
</header>
<main>
Add comment
Michal Szymanski
staff
answered 7 years ago
Hi,
send us your project files and we'll take a look at it.
m.szymanski@mdbootstrap.com
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags