HTML Center navbar

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><a href="#">Nieuws</a></li>
        <li><a href="#">Info &#x25BC;</a>
            <ul>
                <li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
                <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
                <li><a href="scouts_uniform.html">Uniform</a></li>
                <li><a href="https://www.scoutsengidsenvlaanderen.be/technieken-databank">Technieken</a></li>
            </ul>
        </li>
        <li><a href="scouts_afspraken.html">Algemeen</a></li>
        <li><a href="scouts_fotos.php">Foto's</a></li>
        <li><a href="scouts_inschrijven.html">Inschrijven</a></li>
        <li><a href="scouts_contact.html">Contact</a></li>
        <li><a href="#">Permekiaan &#x25BC;</a>
            <ul>
                <li class="dir"><a href="#">Kapoenen &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Kawellen &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Jong-Givers &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Givers &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Do you want the whole navbar to align center. If that's the problem you can use position absolute and from left 50% and translateX(-50%) back. — Yonas Hailu, Jan 17 '17 at 16:39
Yes i would like the whole navbar to be centered on the page. Could you post an answer with your suggestion? — DjKillerMemeStar, Jan 17 '17 at 16:42

Callum · Accepted Answer · 2017-01-17T16:58:59.543

2

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

edited Jan 17 '17 at 16:58

answered Jan 17 '17 at 16:44

Callum

845
11
22

This kinda achieves what i want but the dropdowns stopped working now. – DjKillerMemeStar Jan 17 '17 at 16:54
1

Hey, I have updated the original answer turns out I had mistakenly deleted some properties when adding the new ones. Drop downs now work in the Fiddle I used atleast. – Callum Jan 17 '17 at 17:00
Oke awesome this does what i want it to do. But is it possible to add text next to the bar and center it together? – DjKillerMemeStar Jan 17 '17 at 17:04
1

Something like [this](https://jsfiddle.net/dibdab/73Lpo3fm/)? If so just need to add the text into the top of the `
` tag
– Callum Jan 17 '17 at 17:06
You sir are a first class hero! This is perfect! Thanks for the help. – DjKillerMemeStar Jan 17 '17 at 17:08

score 0 · Answer 2 · answered Jan 17 '17 at 16:42

0

Try to add :

position: absolute;
left: 50%;
transform: translateX(-50%);

at #primary_nav_wrap

answered Jan 17 '17 at 16:42

the_previ

683
6
12

score 0 · Answer 3 · answered Jan 17 '17 at 16:43

0

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;
}

answered Jan 17 '17 at 16:43

Yonas Hailu

853
7
20

This does not really achieve what i mean. Take a look at the site from Samsung. Thats kinda what i'm going for. – DjKillerMemeStar Jan 17 '17 at 16:46

score 0 · Answer 4 · answered Jan 17 '17 at 16:44

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
}

This kinda achieves what i want but the dropdowns stopped working now. — DjKillerMemeStar, Jan 17 '17 at 16:54

score 0 · Answer 5 · answered Jan 17 '17 at 16:46

0

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

answered Jan 17 '17 at 16:46

Klaus Mikaelson

572
6
17

score 0 · Answer 6 · answered Jan 17 '17 at 17:20

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

score 0 · Answer 7 · answered Sep 25 '17 at 07:52