CODEWITHSUNDEEP
htmlcss
Patrick Raines
Patrick Raines

Reputation: 1

centering text in navigation bar CSS

I'm trying to center the navigation bar a new version of my startup's website. The new version is hidden at http://www.pintsteinpro.com/alternateMain.html. If you click on any links, you will be taken to my main website and there are no links redirecting you to the hidden website.

I'm working with a web design from binarytheme.com that can be found here: http://binarytheme.com/bootstrap-background-slideshow-template-vega/

I found the part to the code that controls the text:

.nav a {
    color:#ffffff !important;

but no amount of inserting CSS to center the text seems to work. I have tried:

text-align:center;
margin: 0 auto;
position:absolute;
left:50%;top:0;

I also tried to modify .navbar-header a to center the text with no luck.

This section controls the background color and inserting various centering code inside nav has also not worked.

nav {
    background: #fff;
    z-index:99;
}
.fixed {
    position: fixed; 
    top: 0; 
    min-height: 50px; 
    z-index: 99;
}

Any ideas about what I should try next?

Upvotes: 0

Views: 77

Answers (3)

Yasir Khan
Yasir Khan

Reputation: 520

Do easy steps.

  1. Add .navbar-nav{width: 100%; text-align: center;}
  2. Remove .navbar-nav > li {float: left;}
  3. Add .navbar-nav > li {display: inline-block;}

Upvotes: 0

Thomas Gueguen
Thomas Gueguen

Reputation: 101

Set text-align: center to :

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
   border-color: #101010;
   text-align: center;
}

And display: inline-block to : 

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

I have removed the float: left

Upvotes: 1

Max Filippov
Max Filippov

Reputation: 2072

You can use margin: 0 auto alongside with specified width property to center your div, e.g.

.navbar-nav {
  margin: 0 auto;
  width: 700px;
}

Note that I've removed float: left

Upvotes: 1

Related Questions