Rectangle 27 67

There is currently a bug in Mozilla I discovered that breaks the navbar on certain browser widths with MANY DEMOS ON THIS PAGE. Basically the mozilla bug is including the left and right padding on the navbar brand link as part of the image width. However, this can be fixed easily and I've tested this out and I fairly sure it's the most stable working example on this page. It will resize automatically and works on all browsers.

Just add this to your css and use navbar-brand the same way you would .img-responsive. Your logo will automatically fit

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Another option is to use a background image. Use an image of any size and then just set the desired width:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

People seem to forget about object-fit a lot. Personally I think it's the easiest one to work with because the image automatically adjusts to the menu size. If you just use object fit on the image it will auto resize to the menus height.

.navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

It was pointed out that this does not work in IE "yet". There is a polyfill, but that might be excessive if you don't plan on using it for anything else. It does look like object-fit is being planned for a future release of IE so once that happens this will work in all browsers.

However, if you notice the .img-responsive class in bootstrap the max-width is assuming you are putting these images in columns or something that has an explicit with set. This would mean that 100% specifically means 100% width of the parent element.

.img-responsive
        max-width: 100%;
        height: auto;
    }

The reason we can't use that with the navbar is because the parent (.navbar-brand) has a fixed height of 50px, but the width is not set.

If we take that logic and reverse it to be responsive based on the height we can have a responsive image that scales to the .navbar-brand height and by adding and auto set width it will adjust to proportion.

max-height: 100%;
width: auto;

Usually we would have to add display:block; to the scenario, but since navbar-brand already has float:left; applied to it, it automatically acts as a block element.

You may run into the rare situation where your logo is too small. The img-responsive approach does not take this into account, but we will. By also adding the "height" attribute to the .navbar-brand > img you can be assured that it will scale up as well as down.

max-height: 100%;
height: 100%;
width: auto;

So to complete this I put them both together and it seems to work perfectly in all browsers.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-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>
      </div>
</nav>

Thanks Jose. It doesn't work in IE which I never knew until now. I edited the answer from your comment. Also, I'm not really sure if height and max-height are both necessary.

Sure! Object-fit has been one of the outstanding additions from the webkit/blink engine. Hope other browser integrate them soon! Meanwhile we will be using background images to do the hard work!

Hey Jose actually just figured something out. Check the new demo. It actually seems like my original answer was working in all other browsers not because of object fit but because of height and max-height. I think that's all that's really needed... Can you find a situation where the above won't work now?

I don't even think object fit is necessary since max height and height resize to the container height much like .img-responsive would do.

css - Bootstrap 3 Navbar with Logo - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3 navbar
Rectangle 27 67

There is currently a bug in Mozilla I discovered that breaks the navbar on certain browser widths with MANY DEMOS ON THIS PAGE. Basically the mozilla bug is including the left and right padding on the navbar brand link as part of the image width. However, this can be fixed easily and I've tested this out and I fairly sure it's the most stable working example on this page. It will resize automatically and works on all browsers.

Just add this to your css and use navbar-brand the same way you would .img-responsive. Your logo will automatically fit

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Another option is to use a background image. Use an image of any size and then just set the desired width:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

People seem to forget about object-fit a lot. Personally I think it's the easiest one to work with because the image automatically adjusts to the menu size. If you just use object fit on the image it will auto resize to the menus height.

.navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

It was pointed out that this does not work in IE "yet". There is a polyfill, but that might be excessive if you don't plan on using it for anything else. It does look like object-fit is being planned for a future release of IE so once that happens this will work in all browsers.

However, if you notice the .img-responsive class in bootstrap the max-width is assuming you are putting these images in columns or something that has an explicit with set. This would mean that 100% specifically means 100% width of the parent element.

.img-responsive
        max-width: 100%;
        height: auto;
    }

The reason we can't use that with the navbar is because the parent (.navbar-brand) has a fixed height of 50px, but the width is not set.

If we take that logic and reverse it to be responsive based on the height we can have a responsive image that scales to the .navbar-brand height and by adding and auto set width it will adjust to proportion.

max-height: 100%;
width: auto;

Usually we would have to add display:block; to the scenario, but since navbar-brand already has float:left; applied to it, it automatically acts as a block element.

You may run into the rare situation where your logo is too small. The img-responsive approach does not take this into account, but we will. By also adding the "height" attribute to the .navbar-brand > img you can be assured that it will scale up as well as down.

max-height: 100%;
height: 100%;
width: auto;

So to complete this I put them both together and it seems to work perfectly in all browsers.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-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>
      </div>
</nav>

Thanks Jose. It doesn't work in IE which I never knew until now. I edited the answer from your comment. Also, I'm not really sure if height and max-height are both necessary.

Sure! Object-fit has been one of the outstanding additions from the webkit/blink engine. Hope other browser integrate them soon! Meanwhile we will be using background images to do the hard work!

Hey Jose actually just figured something out. Check the new demo. It actually seems like my original answer was working in all other browsers not because of object fit but because of height and max-height. I think that's all that's really needed... Can you find a situation where the above won't work now?

I don't even think object fit is necessary since max height and height resize to the container height much like .img-responsive would do.

css - Bootstrap 3 Navbar with Logo - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3 navbar
Rectangle 27 2

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <div class="navbar-brand">
            <a href="#"> <img src="http://logos-download.com/wp-content/uploads/2016/06/Udemy_logo.png" class="img-responsive" id="logo"> </a>
        </div>
            <div class="pull-right">
              <button type="button" class="btn btn-danger" id="login_button">Login</button>
        </div>

    </div>
</nav>

Great answer, but is there a way to keep "Login" from going underneath the logo when the window is minimized? Instead have the "Login" stay where it has always stayed :)

css - I don't need my Bootstrap nav to collapse. How do I fix? - Stack...

css twitter-bootstrap
Rectangle 27 5

You could write a @media-query to reduce the left/right padding when it hits the offending breakpoint:

@media(max-width:992px){
.nav>li>a {
padding-left: 10px;
padding-right:10px
    }
}

May not work for every instance, but seems to for your example: http://www.bootply.com/fthRQCpN7d

I like this solution it keeps the navbar within the container and doesn't require recompiling

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

css - how to avoid bootstrap 3 nav bar collapsing into two rows - Stac...

css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 1

Bootstrap's toggle function is a javascript function that is triggered when the user clicks the element with an attribute of data-toggle="collapse". If there is not also a data-target="" id specified, then the element that the user clicks is collapsed. However, in this bit of markup:

<a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">

The data-target="" attribute is set to the id of #nav-to-collapse. So Bootstrap's collapse plugin is going to look for an id="nav-to-collapse" and trigger its function on that id.

So in this markup:

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <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>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-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><!--/.nav-collapse -->
      </div>
    </div>

The data-target is set to the class of .navbar-collapse, which will make everything underneath that element collapse.

Ok I managed to get it working without all the useless navbar classes. But there is one problem, when I set the nav height in css to anything else than auto, the collapse animation which pushed down the body content doesnt work. I created a fiddle so you can see what I mean: jsfiddle.net/cfcZY . When you uncomment the nav { height: } declaration, it breaks.

That's because you are giving it a static height. By setting the height of that container to 100px, it will expand out to 100px, but no more. By setting it to auto, the container's height will expand to make room for all of the content inside that container. If you need it to expand only to a certain height, you will have to both set the height of the container, then ensure that all of your content will fit into that container (by changing to font-size of the nav links, for example).

Yeah, I though it creates new div below the nav and puts the links there. I fixed it by using min-height though :)

css - Bootstrap nav toggle without navbar element - Stack Overflow

css twitter-bootstrap navigation navbar collapse
Rectangle 27 5

You can make the .navbar fixed width, then set it's left and right margin to auto.

.navbar{
    width: 80%;
    margin: 0 auto;
}

that centers the navbar but not the content in the navbar

simple. this is the one that works for me, the other one didn't.

css - Center the nav in Twitter Bootstrap - Stack Overflow

css twitter-bootstrap center navbar
Rectangle 27 5

1) Disable the collapsing menu and hamburger icon

.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}

NOTE: using !important is the simplest way to do this, but it's also a bit of nuclear option as it can make your menu hard to manipulate later on. Deeper digging into bootstrap css will likely reveal some media queries you can override with more granularity... but that's more digging than I have patience for right now:)

EDIT: It just occured to me, what I suggested below is unneecessary. No custom @media-query triggered class needed, just use Bootstrap's hidden-xs like so:

hidden-xs
<i class="fa fa-home"></i><span class="hidemobile"> Home</span></a></li>
@media (max-width: 992px) { /* or whatever breakpoint you want */
    .hidemobile {
        display:none;
    }
}

There is still some behaviour there that you may want to tweak (eg: how to handle your left/right split menu, when to bring the icons closer together to avoid second menu row, etc) but this should get you going in the right direction.

I am trying this now with a new site of mine, and all that happens is that everything disappears and the nabber doubles in height. The only thing that remains is the branding. Is this the default behaviour now?

Not sure what you mean about it being default behaviour, but make sure the hidden-xs is ONLY wrapped around the text, and that the icon is outside that span.

css - (Bootstrap) Is it possible to show menu item icons when the view...

css twitter-bootstrap-3 viewport navbar collapse
Rectangle 27 1

To center the floated navbar-nav you can use relative position and negative left, right values on the navbar-nav itself and on the list items or child elements.

To make sure that the logo is always centered you may think about not using a nav-justified but a regular navbar-nav with a fixed value for left and right padding on the anchor tags, but with individual values for different screens.

To get the vertical alignment working just add the appropriate line-height to the anchor tags.

I have decided to hide the actual navbar-brand and only show it on sx breakpoint. For the centered logo it is the other way around, so we do not have the logo inside the collapsed nav. Just look at the example and i am sure you will get the idea.

Here is the example.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.navbar {
  background-color: #231f20;
  min-height: auto;
  position: relative;
  top: 0px;
  font-size: 13px;
  width: auto;
  border-bottom: none;
  margin-bottom: 0px;
  padding: 40px 0px;
}
.navbar-brand {
  padding: 0 15px;
  height: 96px;
}

@media (min-width: 768px) {
  .navbar-nav {
    position: relative;
    right: -50%;
  }
  .navbar-nav > li {
    position: relative;
    left: -50%;
  }
  .navbar-nav > li a {
    line-height: 126px;
    vertical-align: middle;
    padding: 0 24px;
  } 
}

@media (min-width: 992px) {
  .navbar-nav > li a {
    padding: 0 48px;
  } 
}

@media (min-width: 1200px) {
  .navbar-nav > li a {
    padding: 0 68px;
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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 hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Food</a></li>
                <li class="hidden-xs"><a href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a></li>
                <li><a href="#">Book a Table</a></li>
                <li><a href="#">Promotions</a></li>
            </ul>
        </div>
    </div>
</nav>

html - How do I center a Bootstrap nav bar with a brand image inbetwee...

html css twitter-bootstrap twitter-bootstrap-3 nav
Rectangle 27 11

Check the "Tabbable Nav" example in the Twitter Bootstrap Components. You must have the correct html to this work. Example:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#home" data-toggle="tab">Home</a>
  </li>
  <li><a href="#other" data-toggle="tab">Other</a></li>
  <li><a href="#">...</a></li>
</ul>
 <div class="tab-content">
   <div id="home" class="tab-pane active">
     <p>Home</p>
   </div>
   <div id="other" class="tab-pane">
     <p>Other</p>
   </div>
</div>

See the class applied and the href of the links.

As we have discussed in the comments, we also can change it with Javascript:

<script type="text/javascript">
    ...
    document.getElementById("home").setAttribute("class","active")
$('#home').attr('class','active')

Told you. We are pulpiteers of same gospel. This time you have a detailed answer. ;)

I'm trying to use nav nav-tabs to act like navbar-inner. I mean, if we click on a normal link it won't show a tab-pane. It will jump to the clicked link. How could I change the look of the navbar-inner to look as the nav nav-tabs?

@chelder you want to go to that link, or just show the content of that link in the tab?

$('#tab1Id').attr('class','active')

css - Twitter Bootstrap nav nav-tabs don't change on click - Stack Ove...

css grails twitter-bootstrap nav
Rectangle 27 33

This should work for alpha 6. The key is the class "mr-auto" on the left nav, which will push the right nav to the right. You also need to add navbar-toggleable-md or it will stack in a column instead of a row. Note I didn't add the remaining toggle items (e.g. toggle button), I added just enough to get it to formatted as requested. Here are more complete examples https://v4-alpha.getbootstrap.com/examples/navbars/.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link on the Right</a>
                </li>
            </ul>
        </div>
    </nav>
</body>

Although your solution works but, we should all agree that whatever solution we use is a workaround, Bootstrap 4 is far from stable and, the rules and naming conventions are constantly changing in way that slows down any development. Thank you for helping us to pass this dilemma until we grab a stable version. UPDATE you should put all classes of navbar-toggleable-* so that the navs don't stack up in all screen sizes.

Bootstrap 4 navbar items on right side - Stack Overflow

bootstrap-4
Rectangle 27 33

This should work for alpha 6. The key is the class "mr-auto" on the left nav, which will push the right nav to the right. You also need to add navbar-toggleable-md or it will stack in a column instead of a row. Note I didn't add the remaining toggle items (e.g. toggle button), I added just enough to get it to formatted as requested. Here are more complete examples https://v4-alpha.getbootstrap.com/examples/navbars/.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link on the Right</a>
                </li>
            </ul>
        </div>
    </nav>
</body>

Although your solution works but, we should all agree that whatever solution we use is a workaround, Bootstrap 4 is far from stable and, the rules and naming conventions are constantly changing in way that slows down any development. Thank you for helping us to pass this dilemma until we grab a stable version. UPDATE you should put all classes of navbar-toggleable-* so that the navs don't stack up in all screen sizes.

Bootstrap 4 navbar items on right side - Stack Overflow

bootstrap-4
Rectangle 27 4

<div class="background-image"> </div> /!-- Make sure it is right under the closing head tag! --!/
.background-image {

    height: 400px;
    background-image: url('community.jpg');
    width: 100%;
    position: absolute;
    top:0;
    z-index: -100;


}

After your background div, you can put your jumbotron and customize it. Make sure your image is wide enough ( 1920px is a good width) so that it will look ok on all resolutions. Also, the height must be fixed , otherwise the image is going to take up your whole page.

css - Bootstrap jumbotron under nav bar - Stack Overflow

css twitter-bootstrap-3
Rectangle 27 12

Cleaned up your code a bit in the process, but if you set your navbar to be navbar-static-top rather than navbar-fixed-top, your content will get pushed down when the collapsed menu is expanded.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<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.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <div class="navbar-brand navbar-brand-left" href="#">
        <a href="index.html">
          <img src="somepicture"></img>
        </a>

      </div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <ul class="nav navbar-nav">
        <li><a href="someurl">Home</a>

        </li>
        <li><a href="#" id="active2 ">What's On</a>

        </li>
        <li><a href="#">About Us</a>

        </li>
        <li><a href="#">Parties</a>
        </li>
        <li><a href="#">Gallery</a>

        </li>
        <li><a href="#">Menu</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Share<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Facebook</a>

            </li>
            <li><a href="#">Twitter</a>

            </li>
          </ul>
          <li><a href="#">Contact Us</a>

          </li>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test
navbar-static-top

This worked for me except with one little flaw - it put a band of all white space ABOVE the navbar. Any ideas on how to take care of that?

@user2075599, double check the CSS being used on the page. Also look over the official documentation to make sure you haven't included something you shouldn't have. If you went from fixed to static, make sure you no longer have body{ padding-top: 70px; } in your CSS, as that was required for the fixed version. Remember: when in doubt, use your browser's development tools to inspect the page itself to find out what's going on.

Had a similar whitespace issue, just realized, that my navbar was inside my content container (container-fluid).

html - bootstrap navbar menu overlaps text - Stack Overflow

html css twitter-bootstrap drop-down-menu navbar
Rectangle 27 2

Instead of floating the right column to the left, add overflow:hidden (or auto) to trigger a new block formatting context.

This effectively causes the right column to take up the remaining horizontal space.

You can find a thorough explanation about how this works here

#right-col
{
  overflow:hidden;
}

Nice. This saved me a bunch of time.

css - Twitter Bootstrap 3: Nav Should Take up Remainder of Screen Widt...

css twitter-bootstrap twitter-bootstrap-3
Rectangle 27 467

The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

But, with a little extra CSS you can get the same functionality in 3.

Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

P.S. - Example in navbar that adjusts left position: http://bootply.com/92442

Yeah Thanks I have added it my theme's stylesheet, just copy pasted from old version of bootstrap wordpress.org/themes/bikaner

For example bootply.com/86684, add the following line in css for correct background hover of parent menu item when displaying submenu: .dropdown-submenu:hover {background: #e2e1e1;}

It's hard to believe Mark Otto completely removed submenu css. Why not leave it in and let the developer decide to use submenu?

css - Bootstrap 3 dropdown sub menu missing - Stack Overflow

css twitter-bootstrap twitter-bootstrap-3 submenu
Rectangle 27 1

It isn't clear in your question but your missing the toggle button to open and close the menu when your viewport is reduced, otherwise the mobile menu will always be open.

nav.navbar-default  {
  background: #333E48;
  border: 0;
}
.navbar-default .navbar-brand > img,
.navbar-default .navbar-brand {
  padding: 0px;
  margin: 0;
}
.navbar-default .navbar-brand > img {
  padding: 4px;
  height: 50px;
  margin: auto;
  vertical-align: middle;
  display: inline-block;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav li a {
  line-height: 90px;
  height: 90px;
  padding-top: 0px;
}
.navbar-default .nav-collapse.collapse {
  height: auto !important;
  /* From Stack Overflow */
  overflow: visible !important;
  /* From Stack Overflow */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-collapse" aria-expanded="false"> <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="index.php">
        <img src="http://placehold.it/100x50/fff/fff" />
      </a>

    </div>
    <div class="collapse navbar-collapse" id="bs-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.php">Home</a>

        </li>
        <li class="aktiv"><a href="advertiser.php">Advertisers</a>

        </li>
        <li><a href="publisher.php">Publishers</a>

        </li>
        <li><a href="#" data-toggle="modal" data-target="#aboutModal">About</a>

        </li>
        <li><a href="#" data-toggle="modal" data-target="#pressModal">Press</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

No problem and you're welcome!

html - Bootstrap Nav Disappears on Resize - Stack Overflow

html css twitter-bootstrap
Rectangle 27 214

Left, Right and Below tabs were removed from Bootstrap 3, but you can add custom CSS to achieve this..

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

If you don't need the exact look of a tab (bordered appropriately on the left or right as each tab is activated), you can simple use nav-stacked, along with Bootstrap col-* to float the tabs to the left or right...

nav-stacked
<ul class="nav nav-pills nav-stacked col-md-3">
    <li><a href="#a" data-toggle="tab">1</a></li>
    <li><a href="#b" data-toggle="tab">2</a></li>
    <li><a href="#c" data-toggle="tab">3</a></li>
</ul>

This perfectly resolves the issue. Still wondering why they pulled this out of Bootstrap 3 though.

You should not need to add this back in. This was removed purposefully. See the official Bootstrap documentation as to how you should be handling this now under JavaScript / Tabs. See also, this tutorial on how to use the Bootstrap 3 setup properly to do vertical tabs. tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

Stacked Tabs in Bootstrap 3 - Stack Overflow

twitter-bootstrap tabs twitter-bootstrap-3
Rectangle 27 1

You can re-arrange the elements, put them in flex rows, and use margin-left: auto on the mail icon to push it and the menu/dropdown button to the right.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/4db07c8d8d.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <style>
    #logo {
      width: 250px;
      background: deepskyblue;
    }
    
    #popups {
      padding-right: 15px;
    }
    
    #user {
      display: inline;
      background: olivedrab;
      padding: 15px;
    }
    
    #message {
      display: inline;
      background: lightcoral;
      padding: 15px;
    }
    
    .message {
      margin-left: auto;
    }
    
    .navbar-header, .navbarContainer {
      display: flex;
      align-items: flex-start;
    }
    
    .container > .navbar-header {
      margin-right: 0;
    }
    
    .navbar-nav {
      margin: 0 0 0 auto;
    }
    
    .fa-envelope {
      font-size: 14px;
    }
    .nb {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    }
  </style>
  <nav class="navbar navbar-default">
    <div class="container navbarContainer">

      <div class="navbar-header">


        <a class="navbar-brand" href="#" id="logo">Brand</a>
        <ul class="nav pull-left">
          <li>
            <div id="user" class="pull-left"><i class="fa fa-user"></i> User</div>
          </li>
        </ul>
      </div>
      <ul class="nav navbar-nav message">
        <li>
          <div id="message" class="pull-right"><i class="fa fa-envelope fa-2x"></i></div>
        </li>
      </ul>
      <div class="nb">
      
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

      <div class="collapse navbar-right navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Menu 0</a></li>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ul>
      </div>
      </div>

      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <div class="container">
    <div class="alert alert-warning">We are but visitors on this rock, hurling through time and space at sixty-six thousand miles an hour.</div>
  </div>

</body>

Michael, I have just noticed that the "expand" button does not disappear when clicked (unlike in the original Bootstrap example). Moreover, the #bs-example-navbar-collapse-1 div should be displayed below the existing header, not to the right of it. Can you help?

@Pepe the responsive layout in your pen seems wrong. The mail icon drops below the expand button. And I don't know what you mean "the expand button does not disappear when clicked" - it doesn't disappear in your pen? Took a stab at it tho, updated my answer. If that doesn't work you should post a new question, this question was just to get the message icon to the left of the menu.

css - Bootstrap navbar - align an element in BOTH desktop and mobile -...

css twitter-bootstrap
Rectangle 27 202

nav-tabs list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.

*display: inline;  *zoom: 1;
display: inline-block

@MyHeadHurts oh waoh, thanks so much, didn't pay no mind to older versions of IE since i started working on supporting IE8+ only, but your fix is sound and required since the bootstrap officially supports IE7+. Updated my answer.

@AndersMetnik you can exchange the targetted classes to whatever nav selector you prefer, even a custom class or id.

Wow thanks! this was pretty much a drop-in fix. Fantastic work!

html - How do I center the twitter bootstrap tabs on the page? - Stack...

html css twitter-bootstrap
Rectangle 27 202

nav-tabs list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.

*display: inline;  *zoom: 1;
display: inline-block

@MyHeadHurts oh waoh, thanks so much, didn't pay no mind to older versions of IE since i started working on supporting IE8+ only, but your fix is sound and required since the bootstrap officially supports IE7+. Updated my answer.

@AndersMetnik you can exchange the targetted classes to whatever nav selector you prefer, even a custom class or id.

Wow thanks! this was pretty much a drop-in fix. Fantastic work!

html - How do I center the twitter bootstrap tabs on the page? - Stack...

html css twitter-bootstrap