CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Jiroscopes
Jiroscopes

Reputation: 555

Nav Bar Wont Center Bootstrap

I have a nav bar that I want centered below the title. I am missing something here, I want it to resize correctly, and remain centered the entire way. 

    <div class="row">
      <div class="col-md-12">
        <h2 class="portfolio-head">PORTFOLIO</h2>
      </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-xs-12 text-center">
            <div class="portfolio-nav-holder col-md-6">
              <ul class="portfolio-nav">
                <li><a>Featured</a></li>
                <li><a>Websites</a></li>
                <li><a>Logos</a></li>
                <li><a>Graphics</a></li>
                <li><a>Photography</a></li>
              </ul>
            </div>
        </div>
    </div>

DEMO

Upvotes: 0

Views: 57

Answers (4)

AL Emran
AL Emran

Reputation: 117

Remove the Float Property fr0m Nav link :

.portfolio-nav a{float:none}

Use Display Inline Property in you Nav List Items.

 .portfolio-nav li{ display:inline-block}

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

remove float from the links and make the li's inline-block, then text-align: center on the parent (that you already have) will center everything.

There is also a default left padding on ul, so add padding: 0 to .portfolio-nav for it to be truly centered.

And instead of adding a right margin to all of the a's in the nav, only add it between 2 a's, with .portfolio-nav li:not(:last-child) a { margin-right: 15px; }

.portfolio-head {
  font-family: 'Lato', sans-serif;
  font-size: 2.5em;
  font-style: italic;
  text-align: center;
}

.portfolio-nav-holder {
  height: 20px;
  margin: 0 auto;
  overflow: hidden;
}

.portfolio-nav {
  color: black;
  list-style: none;
  padding: 0;
}

.portfolio-nav a {
  text-decoration: none;
  color: black;
}

.portfolio-nav li:not(:last-child) a {
  margin-right: 15px;
}

.portfolio-nav li {
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12">
    <h2 class="portfolio-head">PORTFOLIO</h2>
  </div>
</div>
<div class="row">
  <div class="col-md-12 col-xs-12 text-center">
    <div class="portfolio-nav-holder">
      <ul class="portfolio-nav">
        <li><a>Featured</a></li>
        <li><a>Websites</a></li>
        <li><a>Logos</a></li>
        <li><a>Graphics</a></li>
        <li><a>Photography</a></li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Santosh
Santosh

Reputation: 1839

You need to provide width to the .portfolio-nav-holder to make it center align

.portfolio-nav-holder{
    height: 20px;
    margin: 0 auto;
    overflow: hidden;
   width: 450px;
}

Here is the fiddle

Upvotes: 0

El Duderino
El Duderino

Reputation: 1392

You could set the columns to only use half the size and then center the column

CSS

.col-centered{
    float: none;
    margin: 0 auto;
}

HTML

<div class="row">
    <div class="col-md-6 col-xs-6 text-center col-centered">
          <ul class="portfolio-nav">
            <li><a>Featured</a></li>
            <li><a>Websites</a></li>
            <li><a>Logos</a></li>
            <li><a>Graphics</a></li>
            <li><a>Photography</a></li>
          </ul>
    </div>
</div>

Upvotes: 0

Related Questions