Search code examples
cssmenuresponsive-designcenter

Centering menu on responsive site

I got this site template and want to center the menu while it's not collapsed. http://themes.iki-bir.com/kyte/index.html

the html code is:

div class="nav-collapse pull-right collapse"

the css:

#header.navbar {
padding: 25px 0;
background: #FFF;
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.07);
-moz-box-shadow: 0 3px 0 rgba(0,0,0,0.07);
box-shadow: 0 3px 0 rgba(0,0,0,0.07);
position: relative;
z-index: 1001;
width: 100%;
display: block;
position: fixed;

Hope that's enough.. Many, many thanks!

Oren

Solution

  • To center the menu when its not collapsed, try this:

    @media (min-width: 980px) {
    #header .container{  text-align:center; }
    #header.navbar-fixed-top .nav-collapse{ float:none;display:inline-block; }
}

    The media query targets the menu only when its not collapsed, this media query could be already in your stylesheet since i see the template is using bootstrap.