Question

I am using a template based off of Twitter Bootstrap for a site I’m building (here’s the link: rwphoto), but I am having some trouble with the mobile drop-down menu. It overlaps instead of pushing content down if I change the navbar-inner div to 194px to fit the height of the repeating image I’m using. I am just not sure exactly why this is a problem. I’ve looked around, but can’t seem to find a solution to this.

Additionally, how would I center the .brand element (logo) in mobile, instead of having it to the left? And how would I get the nav links centered vertically, and horizontally between the logo and the right edge of the screen?

sigh… Sorry, first time using Bootstrap, obviously… :/

Answer 1

For Centering logo, implement this css code to the referred class…

.container { position:relative; }    
.brand { text-align: center;    width: 97%;}

.navbar .btn-navbar {
    display: block;
    position: absolute;
    right: 0;
}

For Centering, the nav links,

.nav-collapse .nav > li > a {
    margin: 12px 0 !important;
    text-align: center;
}

And for the drop-down overlay issue, add this,

.nav-collapse { padding-top: 1em; }