How to center a Navbar that is 90% of the screen

Question

I want to center the navbar as a whole, not the contents of the nav bar.

This is the CSS and HTML for my navbar.

.navbar {
  border-radius: 10px 10px 30px 30px;
  background: #3CE18F;
  overflow: visible;
  position: fixed;
  bottom: 3%;
  width: 90%;
}

<nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

I've tried centering using css & using class names to center but it always seems to left align. I want it perfectly centered.

See attached image for what's going wrong.

As you can see the nav bar is forced left. I don't want to use padding as that can vary for different screen sizes.

Any help will be appreciated.

Try adding `m-auto` class to your navbar – firatozcevahir Feb 03 '21 at 13:52 — firatozcevahir, Feb 03 '21 at 13:52

score 2 · Accepted Answer · answered Feb 03 '21 at 13:50

Wrap you nav inside a div and add property justify-content to align it horizonatally:

<div class="wrapper"><nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav></div>

.wrapper {
    display: flex;
    justify-content: center;
}

score 1 · Answer 2 · answered Feb 03 '21 at 13:43

1

Add display: block and margin: auto to the navbar. Add display: flex to the parent element of the navbar. Should work.

answered Feb 03 '21 at 13:43

Vasko Vasilev

554
1
10
25

Just tested that and it didn't work. – Nitrogen Feb 03 '21 at 13:51

How to center a Navbar that is 90% of the screen

2 Answers2