L. Grobler L. Grobler - 6 months ago 454
HTML Question

Bootstrap - navbar with 2 rows but second row is only 2 columns wide

I'm trying to create a navbar with 2 rows but the lower row should only be 2 or 3 columns wide in which I'll display the logged in user's username. Problem is that I'm stumped, I've tried all sorts of ways to no avail. The navbar still needs to have the hamburger button when on a smaller screen, here's how it's supposed to look like:

+--------------------------------------------------------------------------------+
| <small logo> | link | link | link | link | link | link | link | |
+--------------------------------------------------------------------------------+
| username |
+----------+


Here's what I got so far:

<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
%{--<img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px" />--}%
%{--<g:img dir="images" file="oyg_logo.png" id="logo" style="position:relative;top:10px" />--}%

<div class="span12">

<div class="row">
<div class="span2 offset1" %{--style="text-align:right"--}%>
<div class="navbar-text">
<g:img dir="images" file="oyg_logo.png" id="logo" style="position:relative;top:10px" />
</div>
</div>
<div class="span9" %{--style="text-align:right"--}%>
<div class="navbar-text">
<ul class="nav">
<li><g:link controller="home" action="index">Home</g:link></li>
<li><g:link controller="home" action="resorts">Resorts</g:link></li>
<li><g:link controller="contact" action="contact">Contact Us</g:link></li>
<li><g:link controller="home" action="terms">Terms</g:link></li>
<sec:ifNotLoggedIn>
<li><g:link controller="home" action="howRegister">How to Register</g:link></li>
<li><g:link controller="register" action="register">Register</g:link></li>
<li><g:link controller="login" action="auth">Sign In</g:link></li>
</sec:ifNotLoggedIn>
<sec:ifLoggedIn>
<li><g:link controller="search" action="search">Search Availability</g:link></li>
<li><g:link controller="Bookings" action="bookings">Bookings</g:link></li>
<li><g:link controller="logout" action="index">Logout</g:link></li>
</sec:ifLoggedIn>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span2 offset9">
<ul class="nav pull-right">
<sec:ifLoggedIn>
<li class="username_label" ><g:fullName/></li>
</sec:ifLoggedIn>
<sec:ifNotLoggedIn>
<li class="username_label" >Please log in</li>
</sec:ifNotLoggedIn>
</ul>
</div>
</div>
</div>
</div>
</div>




It just looks like a very thick navbar which happens to have 2 rows of links. Any help would be appreciated. Thanks!

Answer

You can use standard example with <div class="clearfix hidden-xs"></div>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">

  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" 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>
        <a class="navbar-brand" href="#">Small Logo</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Left 1</a></li>
          <li><a href="#">Left 2</a></li>
          <li><a href="#">Left 3</a></li>
          <li><a href="#">Left 4</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Right 1</a></li>
          <li><a href="#">Right 2</a></li>
          <div class="clearfix hidden-xs"></div>
          <li><a href="#">Username</a></li>
          <li><a href="#">Messages</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

</div> <!-- /container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>