HOw to center navbar elements without using flexbox?

How do I center my navbar to be like the pic below. I’ve tried to set it as: display:flex but then it will have extra paddings on top of it which I don’t know how to get rid of.

Here is my code

Just ignore the white spaces cos I did not input the proper img links in it.

Here is the result I want to achieve:

add this to your css

here is a working example https://codepen.io/mlegg10/pen/oePYRY

.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}

This is the “padding” I want to get rid of…

Links Don’t seem to be working when I open the pen …and many images won’t load but it looks like you cleared up the extra stuff at the top. :slight_smile: ~Kevin

Yeah. I didn’t put the correct link for those images. that’s not the concern…

Does this link work?

.navbar-nav {
position:relative;
left:50px;
}

if this solves your problem

Just add this to your css and it will solve everything.

@media (min-width: 768px) {
.navbar-nav {
float: none;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
}

Problem may be platform related. I also run into issues with links when I check on Firefox and IE …less so with Chrome…I guess that’s just something we need to keep in mind when developing. :slight_smile: :slight_smile:

1 Like