CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
unaiherran
unaiherran

Reputation: 1034

Twitter-Bootstrap navigation header with three elements (iOS style)

Im trying to do an horizontal bar that mimics the Navigation view on iOS, thats saying:

Back Logo SomeButton

Left Center Right

After fiddling with many solutions I've been able to get something similar, using

<nav class="navbar navbar-default" role="navigation">

 <a class="navbar-brand" href="#"><img src="static/img_nav/logo_white_trans.gif"> </a>
  <div class="navbar-header navbar-collapse">
    <ul class="nav navbar-nav pull-left">
        <li><a href="#"> &lt; Back</a></li>

    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="#">Button</a></li>
    </ul>
  </div>
</nav>

with this CSS:

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
}

.navbar-brand img {
    height: 20px;
}

When I do the browsing in my phone everything works as I expected, but when I go to larger screens, left and right buttons get together.

Left Right Center

Does anyone know why?

Upvotes: 0

Views: 564

Answers (1)

Suganth G
Suganth G

Reputation: 5156

Try this:

The reason for your issue is :

In navbar-collapse the width is auto, So

Set width:100% in your navbar-header tag

 <div style="width:100%" class="navbar-header navbar-collapse">

DEMO

Upvotes: 1

Related Questions