CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
knif3
knif3

Reputation: 41

Bootstrap navbar collapse not styled correctly

I have a collapsable navbar in bootstrap that is not showing correctly when collapsed. I am moving the navbar-header (which contains a navbar-brand) to the right side with pull-right. However, adding this in seems to make the navbar that is toggled sit between the toggle button and the navbar-brand. I would like the toggled navbar to sit below the button and the brand whenever it is open.

This is the correctly formatted version, however, the Brand is not pulled over to the right enter image description here

This is what is happening when I pull the Brand over enter image description here

Here is the code I am using. Bootstrap version is 3.3.6

<nav class="navbar navbar-default">
  <div class="container">
    <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
        <span class="glyphicon glyphicon-th-list"></span>
      </button>
    <div class="navbar-header pull-right">
     <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 393

Answers (2)

Bui Minh Duc
Bui Minh Duc

Reputation: 132

Try this below code:

<body>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
            <span class="glyphicon glyphicon-th-list"></span>
          </button>
          <div class="pull-right" id="mobile-nav">
                <a class="navbar-brand" href="#">Brand</a>
          </div>
    </div>

    <div class="pull-right" id="com-nav">
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>
<script type="text/javascript">
    $(document).ready(function () {
        setNavbarBrand();
    });

    $(window ).resize(function () {
        setNavbarBrand();
    });

    function setNavbarBrand() {
        if (window.innerWidth <= 768) {
            $('#mobile-nav').show();
            $('#com-nav').hide();
        } else {
            $('#mobile-nav').hide();
            $('#com-nav').show();
        }
    }
</script>
</body>

Upvotes: 0

Praveen
Praveen

Reputation: 847

.pos-rel{ position:relative;}
.navbar-brand{position:absolute; right:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container pos-rel">
    <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
        <span class="glyphicon glyphicon-th-list"></span>
      </button>
    <div class="navbar-header">
     <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
    </div>
  </div>
</nav>

Try this

Upvotes: 1

Related Questions