dahlsdata-tahira dahlsdata-tahira - 5 months ago 21
HTML Question

How to center the navigation?

I am trying to customize a navigation of a Wordpress-theme.

I have tried everything but the navigation is just not centering. I have tried it with

text-align: center; display: inline; display: inline-block.
And even with
margin: 0 auto;
Nothing seems to work.

Maybe I'm applying the rules at wrong place?

I am thankful for any help.

Here is the HTML-code:

<div class="menu_main">
<div class="navbar yamm navbar-default">
<div class="navbar-header">
<div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
<span>Menu</span>
<button type="button"> <i class="fa fa-bars"></i></button>
</div>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse pull-right">
<nav id="navigation">
<div class="menu-top-navigation-container">
<ul id="king-mainmenu" class="nav navbar-nav">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
<li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>


Here is the CSS:

.menu_main{
float: none !important;
text-align: center !important;
width: 100% !important;
z-index: 9999;
}

.navbar-default{
margin-right: 0px !important;
}

.navbar{
position: relative;
margin-bottom: 0px;
border: 0px solid transparent;
}

.navbar-header{
float: left;
}

div#navbar-collapse-1.navbar-collapse.collapse.pull-right{
z-index: 10000 !important;
}

.navbar-collapse.collapse{
width: 100% !important;
margin: 0 auto !important;
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important
}

.pull-right{
float: right !important;
}

nav#navigation{
text-align: center;
}

nav{
display: block;
}

.menu-top-navigation-container{
float: none !important;
text-align: center !important;
}

.navbar-nav{
float: none !important;
margin: 0 auto !important;
width: 90% !important;
}

.nav>li{
display: inline !important;
}

.navbar-nav>li{
float: left;
}

Answer

Remove float form ul and li and text-center class navbar-collapse

CSS:
.navbar-nav{
       float: none;
    }
    .navbar-nav > li {
        display: inline-block;
        float: none;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <div class="menu_main">
            <div class="navbar yamm navbar-default">
                <div class="navbar-header">
                    <div class="navbar-toggle navbar-collapse pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
                        <span>Menu</span>
                        <button type="button"> <i class="fa fa-bars"></i></button>
                    </div>
                </div>
                <div id="navbar-collapse-1" class="navbar-collapse collapse text-center">
                    <nav id="navigation">
                        <div class="menu-top-navigation-container">
                            <ul id="king-mainmenu" class="nav navbar-nav">
                                <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
                                <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
                                <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
                                <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
                                <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
                                <li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
             </div>
         </div>