Navbar Alignment with bootstrap?

Question

I have a basic layout that I'm trying to achieve. I have a .container class with a logo floated to the left, and then i want a bootstrap navbar floated to the right and also on the top of the container, and it seems to be floating correctly with the "pull-right" class on the "navbar-nav" class with bootstrap, but it is underneath the brand logo and I cannot for the life of me figure out why or how to get it aligned correctly.

Anyways, Heres the html....

<html lang= "en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <div class= "container"> <header class = "headerWrap"> <div class = "row"> <div class ="brand"></div> <div class = " userNav col-sm-8 col-sm-offset-4"> <nav class = "navbar navbar-default"> <ul class= "nav navbar-nav pull-right"> <li><a href= "#">Home</a></li> <li><a href= "#">Contact Us</a></li> <li><a href= "#">Sign In</a></li> <li><a href= "#">Cart</a></li> <li><a href= "#">Location + Directions</a></li> <li><a href= "#">Who We Are</a></li> <li><a href= "#">Alumni Network</a></li> </ul> </nav> </div> </div> </header> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

Heres the CSS:

$font-color: white; body { background-color: black; } .headerWrap { width: 100%; height: 250px; } .brand { background-image:url(img/Screen%20Shot%202015-10-25%20at%2010.13.40%20PM.png); background-size: 100%; float: left; background-repeat: no-repeat; width: 250px; height: 100px; } .userNav { float: right; } .navbar-default { background-color: transparent; border: none; } .navbar-default .navbar-nav>li>a{ color: $font-color; }

What am I missing?

Guruprasad J Rao · Accepted Answer · 2015-10-26 04:03:22Z

Its just because you have added col-sm-offset-4 class to your userNav element. Remove it, everything will work as expected. When you keep col-sm-offset-4 class what happens is, it treats that the element needs 12 grids totally. Since it has been already moved 4 grids by brand - logo, and framework cannot assign 12 grids in the same row, it moves it to new row. So no need to give offset again. Just change the element's class as below:

<div class ="userNav col-sm-8"> <!--remove col-sm-offset-4 from here-->

Just a DEMO for you

Ah, I knew it was something simple. For some reason I wasn't thinking of it as an element with its own margins and padding and all of that. Thanks a lot for your help.

Collectives™ on Stack Overflow

Navbar Alignment with bootstrap?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related