CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Uzer
Uzer

Reputation: 187

How do i center align my navbar using bootstrap

I have tried so many things but none seem to work This is my final goal with navbar:

navbar

and this is what i have right now:

now

I can't seem to center the links no matter what i do

heres my code:

<nav class="navbar navbar-transparent">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
        </div>
            <ul class="nav navbar-nav">
                <li><a href="#work">work</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li><a href="#contact" >get in touch</a>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 1

Views: 969

Answers (4)

RB Web
RB Web

Reputation: 62

You can view a demo here

HTML

<nav class="navbar navbar-transparent">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
        </div>
        <ul class="nav navbar-nav navbar-firstnav">
            <li><a href="#work">work</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#skills">skills</a></li>
            <li class="pull-right"><a href="#contact" >get in touch</a>
        </ul>
    </div>
</div>

CSS

.navbar {
    border-radius: 0;
    background-image: -webkit-linear-gradient(0deg ,#232326 ,#5F695E);
}
.navbar-nav {
    float:none;
    margin:0 auto;
    text-align: center;
}
.navbar-firstnav>li {
    display: inline-block;
    float:none;
}
.navbar-firstnav>li>a {
    color: #FFF;
}
.navbar-firstnav>li>a:hover {
    color: #FFF;
    text-decoration: underline;
    background: none
}

Upvotes: 1

Grizzly
Grizzly

Reputation: 5943

HTML:

<nav class="navbar navbar-transparent">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
    </div>
        <ul class="nav navbar-nav navbar-firstnav">
            <li><a href="#work">work</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#skills">skills</a></li>
            <li class="pull-right"><a href="#contact">get in touch</a>
        </ul>
    </div>
</nav>

CSS:

.navbar-nav {
    float:none;
    margin:0 auto;
    text-align: center;
}

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

Bootply

Upvotes: 3

Nitish Kumar
Nitish Kumar

Reputation: 6276

You will need to modify some CSS rules for Navbar component. So add a class center to nav.navbar and the following rules:

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

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

Upvotes: 0

Philip Stier
Philip Stier

Reputation: 64

Are you floating your li elements? Floating the ul? If not have you tried applying the text-align: center; to your ul?

Upvotes: 0

Related Questions