Help with bootstrap sticky header menu

[Historical Forums User]

I have header menu section with a top and bottom level. Right now only the bottom section is a sticky. I’m trying to keep both sections of my header shown when the stick attaches. I’ve tried moving the html for the top section inside of the “navbar” class and it’s contain class without any luck.

Here is the html:

<!--=== Header v1 === -->    
<div class="header-v1 header-sticky">
    <!-- Topbar -->
    <div class="topbar-v1">
        <div class="container">
            <div class="row">
                <div class="col-md-6"></div>

                <div class="col-md-6">

                    <ul class="list-inline top-v1-data">
                        <li style="">
                            <a href="tel:6148391044">
                               <i class="fa fa-phone"></i> Call Today: 614-839-1044 
                            </a>

                        </li>
                    </ul>

                </div>
            </div> <!-- close row -->       
        </div>
    </div>
    <!-- End Topbar -->

    <!-- Navbar -->
    <div class="navbar navbar-default mega-menu" role="navigation">
        <div class="container">


            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="fa fa-bars"></span>
                </button>
                <a class="navbar-brand" href="index.html">
                    <img id="logo-header" src="assets/images/health-source-logo.png" alt="Logo">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
                <ul class="nav navbar-nav">

                    <li class="">
                        <a href="index.html" class="">
                            Home
                        </a>
                    </li>


                    <li class="">
                        <a href="team.html" class="">
                            ...
                        </a>
                    </li>                    
                </ul>                    
            </div><!--/navbar-collapse-->
        </div>    
    </div>            
    <!-- End Navbar -->
</div>
<!--=== End Header v1 === -->

here is the site:
http://healthsource.swasiv.com

[pm4698]

Ok.

If you see at inspection tools, when you scroll down and see the sticky menu, that the class topbar-v1 takes from this code:

.header-fixed .header-v1.header-fixed-shrink .topbar-v1 {
display: none;

}

inside header-v1.css file.
So, if you delete or comment the line display:none; and put some margin for example: margin-top:40px; and play generally with paddings – margins you will get the result you want.

P.S. Check if this class is not shown/used anywhere else so that removing the display:none will not affect other elements

[Author]

Posts