CODEWITHSUNDEEP
twitter-bootstrap
user3792628
user3792628

Reputation: 167

Bootstrap 3 navbar that doesn't take up full width of page

For my page headings I would like to have a tall image in the top left corner (approx 200 pixels square), then a bit of a gap, and then a navbar that takes the rest of the page width. Usually if you wanted an image in this location you'd just make it part of the navbar's brand, but for various reasons I want this image totally outside the navbar.

Something like:

+---------+   +----------------------------------+
|  Big    |   | Item   Item   Item   Item   Item |
|  Image  |   +----------------------------------+
|  Here   |
+---------+

Where the Item's are the navbar.

All of the examples I've found for navbars have them taking up the full width of the page.

Can someone please give me an example of how I might do what I want?

Upvotes: 0

Views: 2645

Answers (3)

wwwanaya
wwwanaya

Reputation: 137

Try with this:

<div id="img">
  <img src="#yourimg">
</div>
<div id="navbar">
  <nav>
  <!-- bootstrap nav-bar code -->
  </nav>
</div>

The CSS code

#img {
position:absolute;
right: 5px // num of px you want at right
top: 5px // num of px you want from the top
}

#navbar {
position:absolute;
right: 205px// num of px you want at right
top: 5px // num of px you want from the top
width: 300px //num of px you want to be the width of the bootstrap navbar
}

Upvotes: 0

ɐsɹǝʌ ǝɔıʌ
ɐsɹǝʌ ǝɔıʌ

Reputation: 4512

You can use Bootstrap Grid System for creating page layouts through a series of rows and columns that house your content.

This is a working demo 

<div class="row">
  <div class="col-md-2">
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png">
  </div>
  <div class="col-md-10">

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>    

  </div>
</div>

Upvotes: 2

Nishant
Nishant

Reputation: 916

width of the bootstap's navbar depends on its outer container.

if you are using bootstrap 3 then you can use something like this

<div class="row"> <div class="col-xs-2">image code here.</div> <div class="col-xs-10">navbar code here</div> </div>

navigation will take width of col-xs-10 (in this case) or your custom width container

Upvotes: 1

Related Questions