Bootstrap resizing and auto-collapsing

Question

I'm currently building the website for my brand new creation and - since I've never been such a CSS guru - I need your lights!

• There is a central screenshot (with the editor inside). When the window is at full size, the screenshot appears fine and centered as it's supposed to be. When I start reducing the width of the window, the image seems as if it's moving to the right. Would it be possible to keep it where it initially is, and resize it when the window resizes?

• On resizing, the navbar menu collapses and a toggle button (mobile-style) is created in its place. Is there any way to disable this? Or, at least, not trigger at that stage but at a smaller width (while the navbar-brand is still fitting)?

That's the core HTML section:

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
                    <span class="sr-only" style="color:black;">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="images/logo.png" width="40">&nbsp;&nbsp;Peppermint</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#"><i class="fa fa-home"></i>&nbsp;&nbsp;Overview</a></li>
                    <li><a href="#"><i class="fa fa-question-circle"></i>&nbsp;&nbsp;Documentation</a></li>
                    <li><a href="http://sites.fastspring.com/insili/product/peppermint" target="_blank"><i class="fa fa-shopping-cart"></i>&nbsp;&nbsp;Buy</a></li>
                    <li><a href="mailto:info@insili.co.uk?subject=Peppermint Support Request"><i class="fa fa-life-ring"></i>&nbsp;&nbsp;Support</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="header">
        <div class="container" >
            <div class="row-fluid" style="text-align:center;">
                <img src="images/screenshot2.png" >
            </div>
        </div>
    </div>

And here's the live page: http://www.osxpeppermint.com

---

Thanks a lot!

Answer 1

The image is larger than the containing div so it jumps outside. Simplest solution is to add the img-responsive to the image:

<img src="images/screenshot2.png" class="img-responsive">

If you want the nav bar to collapse at a different screen width, you will need a custom download of the Bootstrap library. Go to http://getbootstrap.com/customize/ and change the @grid-float-breakpoint value from it's default of @screen-sm-min to whatever width you require.