Search code examples
htmlcsstwitter-bootstrap-2

centred logo with hamburger stack icon in bootstrap 2.x

Im coding a navigation like the below mockup using bootstrap 2.x, the idea is to have a centered logo along with a 'hamburger stack navigation toggle'

header mockup

Ive got the logo centered fine, but im a little unsure how to get it to work with the stack icon whilst keeping to logo centered, because if i add in another element (the hamburger stack) which will need its own span then the logo can only have span11 which isn't enough to center it on the page.

I guess i could achieve this with absolute positioning of the hamburger stack, but would this be correct in terms of using the bootstrap framework and keeping the responsive nature of it working correctly.

Ive made a jsfiddle of the issue here - http://jsfiddle.net/xKSUH/937/

The html im using is 

<div class="row-fluid">
<div class="span12 logo-centre">
    LOGO
</div>

<div class="span8">
    = <!--hamburger stack placeholder icon-->
</div>

Solution

  • You can use an offset to create an empty column on the left side to keep the logo centered.

    <div class="row-fluid">
    <div class="span10 offset1 logo-centre">
        LOGO
    </div>

    <div class="span1">
        = <!--hamburger stack placeholder icon-->
    </div>
</div>

    Updated fiddle - http://jsfiddle.net/xKSUH/939/