GilDev GilDev - 4 months ago 6
HTML Question

Unable to center <ul> inside column in Bootstrap 3

I want a navbar like this:

Navbar hoped

It seems that my idea of putting row and columns inside the navbar is a wrong idea, but it kind of works…

Now, I would like my navigation links (the

<ul>
) to be centered across the page, and I tried a lot of thing but here's what I can only get:

Navbar having

The “/” separators does not make it easier…

HTML:

<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="navbar-header">
<a href="<?php echo $site->url() ?>"><img alt="Logo" class="navbar-left navbar-brand-logo" src="<?php echo url('assets/images/logo.png') ?>" style="height: 50px;">
<span class="navbar-brand" style="color: white;">GilDev</span></a>
</div>
</div>

<div class="col-sm-6">
<ul class="nav navbar-nav">
<li><a href="#">Accueil</a></li>
<li class="separator hidden-xs">/</li>
<li><a href="#">Projets</a></li>
<li class="separator hidden-xs">/</li>
<li><a href="#">À propos</a></li>
</ul>
</div>

<div class="col-sm-3">

</div>
</div>
</div>
</nav>


CSS:

@font-face {
font-family: Ubuntu;
src: url("../fonts/Ubuntu-R.ttf");
}

body, a
{
color: white;
}

.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: underline;
background-color: inherit;
color: white;
}

body
{
background-image: url("../images/gradient.png");
background-repeat: repeat-x;
background-color: #64B2DF;
font-family: Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.separator
{
padding-top: 15px;
}

.navbar-brand-logo
{
margin-right: 15px;
}

.navbar
{
padding-top: 10px;
}


First time I try to make my own theme with Bootstrap, and I suck… Hope you have ideas to center these links! Thanks!

Answer

You can easily have the menu you want by using the following code on .nav:

.nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Check out this working fiddle for a visual representation.