Positioning of fixed header bootstrap

Question

I am using HTML5 boilerplate and Bootstrap to create a website.

I am looking to make the orange and grey banner fixed on scroll but also centered and responsive. At the moment it is fixed on scroll and responsive but NOT CENTERED.

How can i make this element: - FIXED ON SCROLL - RESPONSIVE - CENTRED

Bare in mind that i still want the slider to appear behind the banner as is.

Here is my code for this bit:

<div class="navbar navbar-inverse navbar-fixed-top">
        <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="nav-collapse collapse">
                    <ul class="nav pull-right" id="nav-links">
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#contact">CONTACT</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
                <div class="span12"> <!--THIS IS THE IMAGE I AM USING-->
                    <img src="images/PBP_header.png"/>
                </div>
    </div>

My dev site is: http://dev.paperboyposse.com

Thanks in advance guys!

Ash

Answer 1

Just replace

<div class="span12">
                    <img src="images/PBP_header.png">
</div>

with

<div class="container">
   <div class="span12">
          <img src="images/PBP_header.png">
   </div>
</div>

It should be fixed, responsive and centered now :)

NOTE : I am not considering the slider as part of header btw.