My Bootstrap Navbar list is not coming to the center

Question

I'm trying to center my menu list items in the bootstrap navbar. I've tried with the many CSS styles but it is still in the left.Below is my html and css please correct me if I'm wrong with the css.[To be more specific what I want is I want those menu items right below the Logo.][1]

<div class="header-botom">
            <div class="content white">
                <nav class="navbar navbar-default nav-menu" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="clearfix"></div>
                    <!--/.navbar-header-->

                    <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav nav-font">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Ear Rings</a></li>
                            <li><a href="#">Jewelry </a></li>
                            <li><a href="#">Accessories</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <!--/.navbar-collapse-->
                    <div class="clearfix"></div>
                </nav>
                <div class="clearfix"></div>
            </div

>
             </div> 

.nav-menu{
    background: transparent;
    border-radius: 0;
    border: 0;
    margin-top: 6px;
}
.navbar .{
    text-align:center;
}
.navbar-nav li{
    float: none;
    display: inline-block;
}



  [1]: https://i.stack.imgur.com/wxHSz.png

please try `text-align:center !important;` i hope this will help you — Astound, Jun 03 '17 at 09:03

score 0 · Answer 1 · answered Jun 03 '17 at 09:05

Add the following class in your custom css:

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

Demo:

.nav-menu {
  background: transparent;
  border-radius: 0;
  border: 0;
  margin-top: 6px;
}

.navbar . {
  text-align: center;
}

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

.navbar-nav {
  text-align: center;
  background: #e4e4e4;
}

<div class="header-botom">
  <div class="content white">
    <nav class="navbar navbar-default nav-menu" role="navigation">

      <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav nav-font">
          <li><a href="#">Home</a></li>
          <li><a href="#">Ear Rings</a></li>
          <li><a href="#">Jewelry </a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </nav>
    <div class="clearfix"></div>
  </div>
</div>

Astound · Answer 2 · 2017-06-03T09:54:44.300

yes its seems like i got the solution for your problem, if you are using bootstrap

add the class into your custom css file

.collapse-pdng { padding: 0px 0px; margin: 0 auto; width: 32%; }

add the following class in your html file

    <div class="text-center">
       <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav nav-font">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Ear Rings</a></li>
                            <li><a href="#">Jewelry </a></li>
                            <li><a href="#">Accessories</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
    </div>

add the class text-center in div and put your whole menu in that class, i hope this will help you, please let me know

No it didn't worked but I've added this below class in the css and its worked. .collapse-pdng { padding: 0px 0px; margin: 0 auto; width: 32%; } — srikar reddy, Jun 03 '17 at 09:52

score 0 · Accepted Answer · answered Jun 03 '17 at 10:22

0

What you looking for is to add these css properties.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

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

Possible Duplicate of this question.

JS Bin here

answered Jun 03 '17 at 10:22

breakit

356
2
8

Have you checked it? – breakit Jun 03 '17 at 11:07

My Bootstrap Navbar list is not coming to the center

3 Answers3