Bootstrap - Creating a mobile nav that doesn't use collapse

Question

after looking at lots of tutorials I cant find a solution for my needs in Bootstrap.

The situation... I have two navbars one displays for tablets and mobiles, the other is for larger devices. The reason I didn't use the collapsing responsive feature is because the larger navbar couldn't really be used for smaller devices.

The issue I am having is that I can't seem to make a tabbed mobile menu with a button. I know how to do it with a collapsible navbar but not with a navbar that is permanently a mobile menu.

Here is the html I am using:

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
    <div class="container">
        <button class="visible-sm visible-xs navbar-toggle"
                data-target="#i-want-this-to-collapse" 
                data-toggle="collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="mini-navbar navbar-brand" href="/">
            <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo"
                 class="img-rounded logo-nav mini-navbar" />
        </a>
        <ul class="nav navbar-nav">
            <li><a href="#">Used Cars</a></li>
            <li><a href="#">Get Finance</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle"
                   data-toggle="dropdown">
                    About Driven<strong class="caret"></strong>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href "#">The Team</a></li>
                    <li> <a href "#">Our Partners</a></li>
                </ul>
    </div>
</div>

As you can see it doesn't create a tabbed effect any idea what I can do to achieve this?

Answer 1

By default, on small screens, navbar menu items will take up 100% of the screen width and stack on top of one another. Because that stacking takes up a lot of real estate, bootstrap suggests you add a toggle button to hide the menu items when not in use.

If you want to style them like 'tabs', instead of at full width, you have to make sure they can all fit together next to each other. In most design cases, this isn't trivial.

To style the navbar items like tabs at any width just apply the following CSS:

.navbar-nav {
    margin: 0;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}
.navbar-nav > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
}

Here's a demo in fiddle

---

Additionally, as an alternative to building two separate navbars, you can try to dynamically present content based on available real estate.

For example, if you added icons to each one of your menu items, at smaller screen sizes you could probably get away with just displaying an icon and a tooltip on hover.

Here's an example:

<li class="active">
  <a href="#" >
    <i class="fa fa-car" title="Used Cars"
       data-toggle="tooltip" data-placement="bottom" ></i>
    <span class="hidden-xs">Used Cars</span>
  </a>
</li>

Here's a fiddle the shows that approach