CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user4695271
user4695271

Reputation:

Two navigation bars in Bootstrap

I'm trying to do two navigation bars using Bootstrap and I can't find here in the answers the solution (although there are some of them already answered). What I have is "almost" working, but the second "navigation bar" always hides once I scroll down and I want it to stay right before (and stacked) the first one (black) with the same effect and a little bit smaller (in height).

I have a something working here...anyway I'm posting the source code also:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">

    <title>Bootstrap - Two Navigation Bars</title>

    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!--<link rel="apple-touch-icon" href="apple-touch-icon.png">-->
    <link rel="shortcut icon" href="favicon.ico">
  </head>
  <body data-spy="scroll" data-offset="75">
    <!--[if lt IE 10]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">
      upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <nav class="navbar navbar-inverse navbar-fixed-top" data-offset-top="80" data-spy="affix">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-target="#top-navbar" data-toggle="collapse"
              aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project Name</a>
        </div>
        <div id="top-navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Help</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="navbar navbar-default navbar-static-top fixed-element">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse main-nav">
          <ul class="nav navbar-nav">
            <li><a href="#">One</a></li>
            <li class="divider-vertical"></li>
            <li><a href="#about">Two</a></li>
            <li class="divider-vertical"></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="jumbotron">
        <h1>'Allo, 'Allo!</h1>
        <p class="lead">Always a pleasure scaffolding your apps</p>
        <p><a class="btn btn-lg btn-success" href="index.html">Splendid!</a></p>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <h4>HTML5 Boilerplate</h4>
          <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>

          <h4>Bootstrap</h4>
          <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
        </div>

        <div class="col-lg-6">
          <h4>HTML5 Boilerplate</h4>
          <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>

          <h4>Bootstrap</h4>
          <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
        </div>

        <div class="col-lg-6">
          <h4>HTML5 Boilerplate</h4>
          <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>

          <h4>Bootstrap</h4>
          <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
        </div>
      </div>

      <hr />

      <footer class="text-center">
        <p>Made with &hearts; from the //shido.io team</p>
      </footer>
    </div>

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js scripts/plugins.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!-- endbuild -->

    <!-- build:js scripts/main.js -->
    <!--<script src="scripts/main.js"></script>-->
    <script>
      $(document).ready(function () {
        $('a.page-scroll').bind('click', function (e) { // Ease page scrolling
          var anchor = $(this);

          e.preventDefault();
          $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
          }, 800, 'swing');
        });
      });
    </script>
    <!-- endbuild -->
  </body>
</html>

...and the CSS:

.affix {
  padding: 0;
  -webkit-transition: padding 0.4s linear;
  -moz-transition: padding 0.4s linear;
  -o-transition: padding 0.4s linear;
  transition: padding 0.4s linear;
}

.affix-top {
  padding-top: 6px;
  padding-bottom: 6px;
  -webkit-transition: padding 0.3s linear;
  -moz-transition: padding 0.3s linear;
  -o-transition: padding 0.3s linear;
  transition: padding 0.3s linear;
}

.browserupgrade {
  margin: 0.2em 0;
  background: #cccccc;
  color: #000000;
  padding: 0.2em 0;
}

.container-narrow > hr { margin: 30px 0; }

.dialog {
  bottom: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  padding: 5px 10px 8px;
  width: 600px; /*60%*/
  resize: both;
}

.footer {
  padding-top: 19px;
  color: #777777;
  border-top: 1px solid #e5e5e5;
}

.footer, .header, .marketing {
  padding-left: 15px;
  padding-right: 15px;
}

.header {
  border-bottom: 1px solid #e5e5e5;
}

.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

.marketing { margin: 40px 0; }

.marketing p + h4 { margin-top: 28px; }

.modal-backdrop { background: none; }

.modal-header, .modal-footer { cursor: move; }

.navbar-fixed-top {
  border-bottom: solid 1px #c6cacd;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 1px 4px rgba(49, 49, 64, 0.1);
}

.opener { }

.scrollable-section {
  max-height: 100% /*px*/;
  overflow-y: scroll;
}

@media screen and (min-width: 768px) {
  .container { max-width: 730px; }

  .header { margin-bottom: 30px; }

  .header, .marketing, .footer {
    padding-left: 0;
    padding-right: 0;
  }

  .jumbotron { border-bottom: 0; }
}

body {
  padding-top: 80px;
  padding-bottom: 20px;
}

/* === */

.fixed-element {
  border-bottom: solid 1px #c6cacd;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(49, 49, 64, 0.1);
}

Please, let me know what's missing; I think the issue is in the .fixed-element selector. Thanks in advance!

Upvotes: 1

Views: 2386

Answers (2)

vanburen
vanburen

Reputation: 21663

You might run into problems with the navbar-toggle once the viewport is reduced; this should fix it.

.browserupgrade {
  margin: 0.2em 0;
  background: #cccccc;
  color: #000000;
  padding: 0.2em 0;
}
.container-narrow > hr {
  margin: 30px 0;
}
.dialog {
  bottom: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  padding: 5px 10px 8px;
  width: 600px;
  /*60%*/
  resize: both;
}
.footer {
  padding-top: 19px;
  color: #777777;
  border-top: 1px solid #e5e5e5;
}
.footer,
.header,
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}
.header {
  border-bottom: 1px solid #e5e5e5;
}
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}
.modal-backdrop {
  background: none;
}
.modal-header,
.modal-footer {
  cursor: move;
}
.navbar-fixed-top {
  border-bottom: solid 1px #c6cacd;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 1px 4px rgba(49, 49, 64, 0.1);
}
.opener {} .scrollable-section {
  max-height: 100%;
  overflow-y: scroll;
}
@media screen and (min-width: 768px) {
  .container {
    max-width: 730px;
  }
  .header {
    margin-bottom: 30px;
  }
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  .jumbotron {
    border-bottom: 0;
  }
}
body,
html {
  margin-top: 135px;
  padding-bottom: 20px;
}
.navbar-default.fixed-element {
  border-radius: 0;
  position: fixed;
  top: 60px;
  width: 100%;
  margin-top: 0px;
  border: none;
  border-bottom: solid 1px #c6cacd;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(49, 49, 64, 0.1);
  z-index: 1000;
}
.affix {
  padding: 0;
  -webkit-transition: padding 0.4s linear;
  -moz-transition: padding 0.4s linear;
  -o-transition: padding 0.4s linear;
  transition: padding 0.4s linear;
}
.affix-top {
  padding-top: 6px;
  padding-bottom: 6px;
  -webkit-transition: padding 0.3s linear;
  -moz-transition: padding 0.3s linear;
  -o-transition: padding 0.3s linear;
  transition: padding 0.3s linear;
}
.fixed-element.affix {
  margin-top: -13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-offset="75">
  <nav class="navbar navbar-inverse navbar-fixed-top" data-offset-top="80" data-spy="affix">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-target="#top-navbar" data-toggle="collapse" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button> <a class="navbar-brand" href="#">Project Name</a>

      </div>
      <div id="top-navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Help</a>

          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="navbar navbar-default fixed-element" data-offset-top="50" data-spy="affix">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav"> <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <div class="collapse navbar-collapse main-nav">
        <ul class="nav navbar-nav">
          <li><a href="#">One</a>

          </li>
          <li class="divider-vertical"></li>
          <li><a href="#about">Two</a>

          </li>
          <li class="divider-vertical"></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="jumbotron">
      <h1>'Allo, 'Allo!</h1>

      <p class="lead">Always a pleasure scaffolding your apps</p>
      <p><a class="btn btn-lg btn-success" href="index.html">Splendid!</a>

      </p>
    </div>
    <div class="row marketing">
      <div class="col-lg-6">
        <h4>HTML5 Boilerplate</h4>

        <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
        <h4>Bootstrap</h4>

        <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
      </div>
      <div class="col-lg-6">
        <h4>HTML5 Boilerplate</h4>

        <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
        <h4>Bootstrap</h4>

        <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
      </div>
      <div class="col-lg-6">
        <h4>HTML5 Boilerplate</h4>

        <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
        <h4>Bootstrap</h4>

        <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
      </div>
    </div>
  </div>
</body>

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16341

Add navbar-fixed-top to both navbars and add a margin to the second navbar with a value equal to the height of the first navbar like this:

.fixed-element{
    margin-top:63px;
}

Then, add data-affix to second navbar too. Now since the first navbar height will change when scrolled, you need to update that margin-change for the second navbar like this:

.fixed-element.affix{
    margin-top:51px;
}

Here is a jsfiddle with above codes along with transitions included: https://jsfiddle.net/AndrewL32/exg6p0bs/1/

Upvotes: 0

Related Questions