Bootstrap Navbar Links Won't Centre

Question

I've been trying to centre the links/tabs on my Bootstrap navbar for over a week now and it's doing my head in. Have gone through every similar question on here and absolutely nothing is working. I'm thinking I've doubled up rules somewhere along the line or am not actually targeting the right thing.

It's the basic Bootstrap navbar snippet on Dreamweaver. I've managed to customise colour/font/size, but just can't get the darn thing to sit in the middle.

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

add a fiddle of your work a picture that describe your actual requirement. — Muzamil Abbas, Jun 17 '17 at 08:50
The links look centered to me (with the toggle in the upper right corner) once the Bootstrap/jQuery links were added to the code. What do you want exactly? Did I accidentally solve the problem? Or does it behave differently at your end? — Nisse Engström, Jun 17 '17 at 17:43
Thanks for checking that Nisse, I should have clarified. The toggle menu is working perfectly and sitting where I need it to.. it's actually the default/desktop menu I can't get the links to centre on :( — bravonove, Jun 18 '17 at 03:37

score 0 · Answer 1 · answered Jun 17 '17 at 08:41

0

Try adding these classes

CSS

.navbar-header
{
  float:none;
}

.navbar-nav li
{
  float:none;
  display:inline-block;
}

hope this helps..

answered Jun 17 '17 at 08:41

Chandra Shekhar

3,550
2
14
22

VXp · Accepted Answer · 2018-06-10T08:35:21.843

0

You can do it with the Flexbox:

.navbar {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
}

edited Jun 10 '18 at 08:35

answered Jun 17 '17 at 08:49

VXp

11,598
6
31
46

LKG · Answer 3 · 2017-06-17T10:35:42.843

Basically bootstrap using float:left in navbar-header and li so parent div doesn't accept the center alignment or margin auto so update css part which included in following snippet or check fiddle link

In first option you will get nesting classes to look css and html both carefully.

1st option with nesting class to get center

In second option you will get only css changes so check css carefully.

Second option to get center

2nd option to get center

Update css part, I am using inline-flex to get center

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this css part */

.navbar-header {
  float: none; /* Add this */
}

.navbar-nav li {
  display: inline-flex;  /* Add this */
  float: none;  /* Add this */
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this css part */

.navbar-header.center-items {
  float: none;  /* Add this */
}

.navbar-center.navbar-nav li {
  display: inline-flex;  /* Add this */
  float: none;  /* Add this */
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header center-items"> <!--Add class -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav navbar-center">  <!--Add class -->
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

You can upvote answer so it will help to other communities member — LKG, Jun 20 '17 at 04:48

Bootstrap Navbar Links Won't Centre

3 Answers3