Different navbar styles in mobile sizes & desktop

Question

i'm trying to achieve a similar type of navigation styling for my own website that I saw on a template on WordPress called Enliven (see here - http://themezhut.com/demo/enliven/). The template seems to have 2 different navs... in mobile it isn't fixed at the top and expands when clicked on.. when 992px or wider, the nav expands across the top and is fixed when you scroll.

Can anybody help me out with achieving a navigation like this? possibly point me in the correct direction? I'm trying to become more familiar with Bootstrap 3 but have mainly taken courses on Bootstrap 4..

Thank you! :)

"mainly taken courses on Bootstrap 4"? That's unusual since it's still in alpha — Carol Skelly, Jan 17 '17 at 13:26

ThinhLe · Answer 1 · 2017-01-13T06:19:22.420

$(document).ready(function() {
  if (document.documentElement.clientWidth > 480) {
    $("#menu").addClass("navbar-fixed-top");
  } else {
    $("#menu").removeClass("navbar-fixed-top");
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <nav id="menu" class="navbar navbar-inverse ">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a>
              </li>
              <li><a href="#">Page 1-2</a>
              </li>
              <li><a href="#">Page 1-3</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Page 2</a>
          </li>
          <li><a href="#">Page 3</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</body>

</html>

on mobile devices, Im looking for a nav that doesn't stay fixed to the top — Raylon, Jan 13 '17 at 03:57
edited for you Raylon. Reponsive any size of mobile you want. — ThinhLe, Jan 13 '17 at 06:20

score 0 · Answer 2 · answered Jan 12 '17 at 06:42

0

Adding a scroll event listener would work fine. So you just add a function that changes the style of the nav, when you scroll. So you for example change the background-color, color, height, ...

answered Jan 12 '17 at 06:42

Tobias Glaus

3,008
3
18
37

score 0 · Answer 3 · edited Jan 12 '17 at 12:26

working bootply link : http://www.bootply.com/105915#

you have to use button class for button toggle-collapse for toggling the nav menu on click of button and media query to only display the button for small screen

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header navbar-right">
        <p class="navbar-text">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>


//css

body {
    padding-top:70px;
}

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Gotame this isn't what im looking for.. I dont want the nav on mobile to stay fixed at the top.. i want it to scroll.. I only want the nav to stay fixed at the top on desktop screens. — Raylon, Jan 13 '17 at 04:07

score 0 · Answer 4 · edited May 23 '17 at 12:16

I answered a very similar question here

With Bootstrap, this type of navbar can be done use the ScrollSpy component to "watch" the scroll position and change styles when the scroll position his a specific point. You end up with 2 different nabvar styles.

   /* navbar style once attached to the page */ 
   .affix {
         background-color: black;   
    }

    @media (min-width:768px) {
        .affix-top {
          /* initial navbar style at top */
          background-color:transparent;
          border-color:transparent;
          padding: 15px; 
        }
    }

Demo: http://www.codeply.com/go/xp2fY6sVHP

Different navbar styles in mobile sizes & desktop

4 Answers4