CODEWITHSUNDEEP
csstwitter-bootstrapheaderoverlap
mosquito242
mosquito242

Reputation: 353

How to stop container appearing under header using bootstrap

I'm building a rails app right now using bootstrap for the UX. I need help figuring out how to keep the container class from appearing under the navbar. This is what the html for the page looks like:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <span class="pull-right"> Title text goes here </span>
    </div>
  </div>
</header>


<div class="container">
    <%= yield %> <br / >
</div>

The only CSS on the page is css from bootstrap.

Upvotes: 1

Views: 3178

Answers (2)

Troy Carlson
Troy Carlson

Reputation: 3121

Any particular reason you need the div with the "container" class inside of the "navbar-inner" div? I would suggest changing the class of that to "brand", ditching the span, and putting your title text inside that brand div, like so:

<header class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="brand pull-right">Title text goes here </div>
    </div>
</header>

Bootstrap can be picky about how various classes are nested and you should follow the same structure as outlined in the documentation:

http://twitter.github.io/bootstrap/components.html#navbar

Upvotes: 1

mana
mana

Reputation: 66

look at bootstrap samples, maybe you need to add style for the body:

  body {
    padding-top: 40px;
  }

Upvotes: 5

Related Questions