Adding a Header to Bootstrap

Question

I’m fairly new to Bootstrap and am having trouble placing a header above the navigation bar. I need to have a header for the current website with at least 70 px in height, at the same time I need to make sure the Responsiveness works when seen through mobile phone. My current code is

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" 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>
          </button>
          <a class="brand" href="#index.html"><img src="img/navigationlogo.png" alt="Home"/></a>

          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="#index.html"><img src="img/Home_Button.png" width="24" height="21" alt="Home"/></a>
              </li>
</ul>
          </div>
        </div>
      </div>
    </div>

What is was think I could do is to add

<header></header>

Above navigation bar and place my logo there.

Can someone please provide me a sample code with css on how I can achieve this ? As I heard that some minimum padding is to be maintained so that the responsive navigation works if seen through a mobile device.

Stalker

You'll have to override the CSS if you want it to be fixed position. Have you tried putting your custom header at the beginning of the .navbar div (right before .navbar-inner)? – Everyday

I havent, would that work. could you please provide some sample code? – Stalker

Answer 1

add a header tag and give it the "page-header" class. This will give your website a nice little header.

Naevus

Great! Is it possible or better is it common to have two <header> stacked above like this <header class="navbar navbar-fixed-top navbar-inverse"></header> <header class="page-header"></header> – Stagy

Answer 2

If you're wondering about Bootstrap's standard headers, you should also be aware of how to add a subhead.

<div class="page-header">
  <h1>Your mother was a hamster 
      <small>and your father smelt of elderberries</small>
  </h1>
</div>

Result:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
  <h1>Your mother was a hamster
    <small>and your father smelt of elderberries</small>
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Bonnee

Answer 3

You can place a div or an html5 header block above the navbar in the following way , assuming your width to be 1000px for the image:

<header>
<img src="http://placehold.it/1000x70"/> 
</header>

You can place your navbar after the above code.

You can see a jsfiddle Demo

Debbidebbie