CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sooraj s pillai
sooraj s pillai

Reputation: 916

How to align navbar to center

I want to know how to align navbar contents to center , here is the code that i am using . Actually i don't know what is the problem with the code any help would be greatly appreciated.

Fiddle

.tg-navigationarea {
  width: 100%;
  float: left;
  position: relative;
  background: #000;
}

.tg-nav {
  z-index: 2;
  float: left;
  text-transform: uppercase;
  font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}

.tg-navigation {
  width: 100%;
  float: left;
  padding: 0;
  line-height: inherit;
}

.tg-navigation ul {
  margin: 0;
  list-style: none;
  line-height: inherit;
}

.tg-navigation>ul {
  width: 100%;
  float: left;
}

.tg-navigation ul li {
  line-height: inherit;
  list-style-type: none;
}

Upvotes: 0

Views: 13677

Answers (5)

Savado
Savado

Reputation: 585

To center this list, all you need to add is:

.tg-nav {
  width: 100%:
}

.tg-navigation {
  width: 100%;
}

.tg-navigation ul {
  display: inline-block;
}

Besides that, what's up with all the float: left? If you want elements to center, using float: left is what I would avoid, except of course for the list-items.

I updated your FIDDLE

Upvotes: 0

MIke J.
MIke J.

Reputation: 61

   .tg-navigationarea {
     width: 100%;
     float: left;
     position: relative;
     background: #000;
     }

.tg-nav {
  z-index: 2;
  float: left;
  text-transform: uppercase;
  font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}

.tg-navigation {
  width: 100%;
  float: left;
  padding: 0;
  line-height: inherit;
}



 .tg-navigation ul {
  margin: 0;
  list-style: none;
  line-height: inherit;
}

.tg-navigation>ul {
  width: 100%;
  float: left;
Text-align:center
}

.tg-navigation ul li {
  line-height: inherit;
  list-style-type: none;
float:none;
display:inline-block
}

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

Give display:inline-block to li and text-align:center; padding:0; to ul tag.

.tg-navigationarea {
  width: 100%;
  float: left;
  position: relative;
  background: #f7f7f7;
}

.tg-nav {
  z-index: 2;
  float: left;
  text-transform: uppercase;
  font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}

.tg-navigation {
  width: 100%;
  float: left;
  padding: 0;
  line-height: inherit;
}

.tg-navigation ul {
  margin: 0;
  list-style: none;
  line-height: inherit;
}

.tg-navigation > ul {
  width: 100%;
  float: left;
  text-align:center;
  padding:0;
}

.tg-navigation ul li {
  line-height: inherit;
  list-style-type: none;
}

li.menu-item-has-children {
  position: relative;
}

li.menu-item-has-mega-menu {
  position: static;
}

li.menu-item-has-children > a:before,
li.menu-item-has-mega-menu > a:before {
  top: 0;
  right: 10px;
  content: '\f107';
  position: absolute;
  font-size: inherit;
  line-height: inherit;
  font-family: 'FontAwesome';
}

.sub-menu li.menu-item-has-children > a:after {
  top: 0;
  right: 10px;
  content: '\f105';
  position: absolute;
  font-size: inherit;
  line-height: inherit;
  font-family: 'FontAwesome';
}

.tg-navigation ul li .sub-menu li.current-menu-item > a {
  color: #333;
}

.tg-navigation ul li .sub-menu li.current-menu-item > a:before {
  height: 100%;
}

.tg-navigation > ul > li {
  display: inline-block;
}

.tg-navigation ul li a {
  color: #666;
  display: block;
  padding: 0 25px;
  position: relative;
  line-height: inherit;
}

.tg-navigation > ul > li > a {
  color: #333;
  z-index: 2;
}

.tg-navigation > ul > li:last-child > .sub-menu {
  right: 0;
  left: auto;
}

.tg-navigation > ul > li:last-child > .sub-menu .sub-menu {
  right: 100%;
  left: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="tg-nav" class="tg-nav">
  <div id="tg-navigation" class="navbar-collapse tg-navigation">
    <ul>
      <li>
        <a href="javascript:void(0);">Home</a>
      </li>
      <li>
        <a href="results.html">About</a>
      </li>
      <li>
        <a href="javascript:void(0);">Packages</a>
      </li>
      <li>
        <a href="javascript:void(0);">Destination</a>
      </li>
      <li>
        <a href="javascript:void(0);">Gallery</a>
      </li>
      <li>
        <a href="javascript:void(0);">Blog</a>
      </li>
      <li>
        <a href="javascript:void(0);">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Ajeesh KH
Ajeesh KH

Reputation: 340

apply this css rule to elemnts

.tg-nav {
    z-index: 2;
    float: left;
    width: 100%;
    text-align: center;
    font: 400 13px/40px 'Open Sans', Arial, Helvetica, sans-serif;
}
.tg-navigation > ul {
    width: auto;
    float: none;
    display: inline-block;
    margin: 0 auto;
}

Upvotes: 1

Jesse
Jesse

Reputation: 3642

One of the ways to do this is using flexbox. Adding

display: flex;
justify-content: center;

Will center your navbar, if you remove the width: 100% and the float: left.

Updated Fiddle: https://jsfiddle.net/103kbsh6/5/

Upvotes: 1

Related Questions