Center the Navigation Bar within the white menu box

  • Resolved TECKSPEED

    (@teckspeed)


    10 years, 2 months ago

    Hi guys,

    First off I love the theme, based off bootstrap is a great out of the box advantage for mobility and such. However, I am working on a site for a client right now and need to center the navigation bar in the middle of the white menu box. I’ve tried various things and already looked at this snippet and have tried it and it isn’t what I need.

    Now I have this code for centering my tagline and it functions perfectly fine:

    .navbar-wrapper .navbar h2{
	text-align: center;
}

    I tried doing the same thing for the ul element in the navigation bar but no avail. Furthermore, changing the margin-left in CSS does change the positioning but its not a ‘true’ centyering like the tagline is.

    Can anyone spread some light on this for me?

    Thanks,

    Kyle

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter TECKSPEED

    (@teckspeed)

    Secondly, I am working in XAMPP and dont have a url for you to view (sorry about that) help is harder to give when you cant use fire bug really trust me. . .

    I did already request this feature be added. I’ll flag your post.

    What about this:

    .navbar-inner{
    padding-right: 5px;
}
.tc-header .nav-collapse{
    float: none;
}
.navbar .nav {
    width: 100%;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.nav-collapse .nav > li{
    float: none;
    display: inline-block;
}
.nav-collapse .nav > li li{
    text-align: left;
}
@media (max-width: 979px){
    .nav-collapse .nav > li{
        display: list-item;
    }
}

    edit: missing a selector.
    Also maybe would be better to limitate this when sticky isn’t enabled

    Thread Starter TECKSPEED

    (@teckspeed)

    @rdellconsulting, it seems funny to not have that functionality already however, if you xhange the span of the navbar to span 12 to take up the whole box then use:

    float: none;
 text-align: center;

    do you think that would work as a simple solution? My biggest problem is making that span12 to take up the whole box.

    @d4z_conf I’ll give this a swing and see what I have and report back to you.

    Thanks,

    – Kyle

    Thread Starter TECKSPEED

    (@teckspeed)

    @d4z_conf I used your code to test and it works fine, now why all that code for a simple adjustment is beyond me. Thanks.

    Thread Starter TECKSPEED

    (@teckspeed)

    Marked this as resolved it encompasses the overall goal although I need to look into this further to see line by line what I had differently.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Center the Navigation Bar within the white menu box’ is closed to new replies.