HTML Center navbar - html

Question

I got a navbar with several levels that i changed acording to this site:https://codepen.io/philhoyt/pen/ujHzd
I've looked around on the internet but the solutions they provide (using display:inline-block) did not seem to work out.
Sources i've tryed:
How to center a navigation bar with CSS or HTML?
how to center css navigation bar
Any help would be appriciated.
#primary_nav_wrap
{
margin:auto;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
position:relative;
float:left;
margin:auto;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:Futura;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>

Answer 1

I made some changes to these two classes:
#primary_nav_wrap
{
margin:auto;
text-align:center;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
display: inline-block;
position:relative;
margin:auto;
padding:0;
}
The solution was to use display:inline-block and text-align:center;. But also deleting the float: left. Working Fiddle

Answer 2

Try to add :
position: absolute;
left: 50%;
transform: translateX(-50%);
at #primary_nav_wrap

Answer 3

You can use this code to center the whole nav.
#primary_nav_wrap ul {
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
right: 0;
margin: 0;
padding: 0;
}

Answer 4

I removed the float from the ul and li's and added display: inline-block to the li tags, so I ended up with this:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
text-align: center;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
display: inline-block;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}

Answer 5

Add class to <ul> make it <ul class="extra"> and add css to that class .extra{left:33.33%}

Answer 6

You just need to make few changes in your css classes.
#primary_nav_wrap ul li
{
position:relative;
/*float:left;*/
margin:0;
padding:0;
display:inline-block;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
/*float:left;*/
margin:0;
padding:0;
text-align:center
}
Please check updated fiddle

Answer 7

HTML Center navbar with flexbox
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:Futura;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* flexbox */
#primary_nav_wrap {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
#primary_nav_wrap ul {
list-style:none;
background-color: cornflowerblue;
//padding: 1rem;
//margin: 1rem;
-webkit-align-self: center;
align-self: center;
}
/* || flexbox */
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>

Answer 8

What happens if you add left and right auto margins to primary_nav_wrap? i.e. add this to CSS:
#primary_nav_wrap
{
margin-top:15px;
margin-right: auto;
margin-left: auto;
}