CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jdmdevdotnet
jdmdevdotnet

Reputation: 1

Having bootstrap navbar have elements on top and bottom of header

Can't quite seem to wrap my head around a bootstrap nav having elements on bottom and top of navbar, while still utilizing the collapsable navbar.

enter image description here

Here is what I've tried: Fiddle

As you can see, I was able to achieve the text on top and bottom of navbar (while still using the collapsable navbar feature), but when you look at it in mobile (as in, when the menu is collapsed and you click on the hamburger logo), it's completely messed up.

So this has me wondering if perhaps I'm not approaching this the right way?

Here is the CSS:

#mainNavBarTop {
    position: absolute;
    margin-top: -10px;
    top: 0;
    left: 0;
}

#mainNavBarBottom {
    position: absolute;
    margin-bottom: -10px;
    bottom: 0;
    left: 0;
}

and HTML

<nav class="navbar navbar-default">
        <div class="container-fluid">
           <div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" 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><img src="" /></div>
           <div class="navbar-collapse collapse" id="navbar">

                               <ul class="nav navbar-nav" id="mainNavBarBottom">
                 <li class="bottom"><a href="#">About</a></li>
                 <li class="bottom"><a href="#">Contact</a></li>
              </ul>
              <ul class="nav navbar-nav" id="mainNavBarTop">
                 <li class="bottom"><a href="#">About</a></li>
                 <li class="bottom"><a href="#">Contact</a></li>
              </ul>
              <form class="navbar-form navbar-right" role="search">
                 <div class="form-group"><input class="form-control" type="text" placeholder="Search"/></div>
                 <button class="btn btn-default" type="submit">Submit</button>
              </form>
           </div>
        </div>
     </nav>

Upvotes: 0

Views: 2207

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

If you want the navigation links to display over multiple lines on a desktop view, all you have to do is specify a width for the navbar that accommodates for the image, and also add enough items to the dropdown so that they overflow.

Optionally, you can have the links pressed up against the right rather than the left by adding float: right to the li elements of the navbar. Note that this will reverse the order of the items in the list, so you may wish to list the links in reverse order in the HTML itself if you opt for this.

You can see this by expanding the snippet below, or by viewing the JSFiddle here. The links all stay directly below one another in the collapsed menu, though occupy two lines in the desktop view. Expanding the JSFiddle to the maximum width shows that the links will revert back to a single line when there is enough space to contain them.

@media (min-width: 768px) {
  .navbar-nav.pull-right {
    width: calc(100% - 120px); /* 100% - image width */
  }
  .navbar-nav>li {
    float: right; /* Optionally align items to the right */
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container">
    <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>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/120x30" width="120px;" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav pull-right">
        <li><a href="/browser/saved/">Saved searches</a></li>
        <li><a href="../index.html">Settings</a></li>
        <li><a href="../index.html">About</a></li>
        <li><a href="../index.html">Sign In</a></li>
        <li><a href="../index.html">Another Link</a></li>
        <li><a href="../index.html">Another Link</a></li>
        <li><a href="../index.html">Another Link</a></li>
        <li><a href="../index.html">Another Link</a></li>
      </ul>
    </div>
  </div>
</nav>

Hope this helps! :)

Upvotes: 1

Related Questions