Centering Navbar In Agency- Bootstrap 4 Theme

I was just wondering if anyone could help me with a problem I have been stuck on for a while. What I am wanting to accomplish is centring the menu at the top of the page (so that t

Solution 1:

You will need to override some Bootstrap styles. You can use css3 flexbox to center align navigation items.

Following Bootstrap styles are being applied on .navbar:

@media (min-width: 768px)
  .navbar-nav {
    float: left;
  }
}

Override them in your custom style sheet.

@media (min-width: 768px)
  .navbar-nav {
    float: none;
    display: flex;
    justify-content: center;
  }
}

Or if you don't wants to use flexbox then you can use following css:

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

Update Fiddle:

Solution 2:

You can also do it without using "Flex"

.navbar-collapse{
  text-align: center;
}

.navbar-nav {
    float: none;
    margin: 0 auto;
    display: inline-block;
}

Here the Fiddle