CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Manic Depression
Manic Depression

Reputation: 1040

Twitter Bootstrap - width of navbar in row with other elements

In mobile version I need to have logo and navbar in one row, but then navbar content is too small (texts are on two rows, one row will be much better). Can I do something to increase width on 100%?

I create jsfiddle here http://jsfiddle.net/8ayj7o36/

  <div class="row">
    <div class="col-xs-8 col-sm-8 col-md-3">
        <a href="#" class="logo"><img src="../img/logo.png" alt="" class="" /></a>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-9">

  <!-- Static navbar -->
  <div class="navbar navbar-default">
    <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="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Link dfa dfa dfdf</a></li>
        <li><a href="#">Link bbbb bbb bb</a></li>  
      </ul>
    </div><!--/.nav-collapse -->
  </div>
 </div>
  </div>

Thanks for any help!

Upvotes: 2

Views: 59

Answers (1)

Greenhorn
Greenhorn

Reputation: 590

Put the <a> tag corresponding to your logo within the navbar-header, so that everything falls in single line. Now it is for you to adjust col-group according to your requirement. This is your modified Fiddle

<div class="navbar-header">
<a href="#" class="logo"><img src="../img/logo.png" alt="logo" class="" /></a>
-
-
-
</div>

Upvotes: 1

Related Questions