adlib pro asked 8 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>

Michal Szymanski staff answered 8 years ago


Hi, send us your project files and we'll take a look at it. m.szymanski@mdbootstrap.com

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

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