Question

I’m creating a Site using Twitter Bootstrap 2.0.4 + bootstraps responsive.css. What I don’t know is: Is it possible to have a logo appearing at the top left of the site and the navbar appearing on the right of the logo (but fixed at top)? While changing Sizes, the Logo should then appear on top of the navbar.

Would be really nice to get an answer for I haven’t found anything helpful yet.

Greetings,
Dominik

edit: Here’s a picture describing what I want to achieve: http://i.imgur.com/HX3ZM.png

Logo on the left, then navbar.

Answer 1

Okay, I got it. I used the fixed navbar, which didn’t work as expected. You have to use a static navbar. Then you could just use the row / scaffolding system from bootstrap.

Example code for a logo left from the navbar:

   <div class="row-fluid">
    <div class="span3">
      <p><img src="/sites/img/your_logo.png" alt="Logo" class="responsive-logo"></p>
    </div>
    <div class="span9">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <div class="btn-group pull-right">
              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-user"></i> Username
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Profile</a></li>
                <li class="divider"></li>
                <li><a href="#">Sign Out</a></li>
              </ul>
            </div>
            <div class="nav-collapse">
              <ul class="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>
        </div>
      </div><!-- end navbar -->
    </div><!-- end span8 -->
  </div><!-- end row -->

To make my Logo responsive, I added the following css rules:

  .responsive-logo {
max-width: 100%;
height: auto;
border: 0;
padding-top: 10px;

}