Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap navbar margins

I'd like to make the left and right margins of the navbar conetnt smaller so the "brand" (left most component) appears more on the left then the default and same for the right component.

Can somebody point me to relevant less variables to modify?

Thanks

like image 539
user1377822 Avatar asked Apr 20 '13 09:04

user1377822


1 Answers

With a basic layout, the CSS selector you want is

body > .navbar .brand

Play with margin-left and margin-right until you get the result you want. Depending on how you are calling your CSS styles, you may need to add !important as well, eg

body > .navbar .brand{
margin-left:-20px !important;
margin-right:-20px !important;  
}

If you don't have any success with this, try ommitting body >

EDIT

If you want to change the width of the entire navbar, try something like

.navbar{
margin-left:-20px;
margin-right:-20px;
}

You might also need to adjust the details for navbar-inner, eg

.navbar-inner{
padding-left:0;
padding-right:0;
}  

Edit
See if this helps: http://jsfiddle.net/panchroma/zBeZF/

Good luck!

like image 56
David Taiaroa Avatar answered Oct 14 '22 10:10

David Taiaroa