Customizing Navbar Width/Position

I’m trying to customize the width and position of my navbar on my site and having trouble keeping the responsiveness of the nav.

I simply added: .navbar { width: 940px;} to my app.less file and it no longer is responsive. Is there something I am missing that I have to change in my variables.less file? Also, I would like to not have it stick to the top of the page like it is default in Roots, but can’t manage to make that work either.

Thank you!

The Bootstrap navbar in Roots isn’t sticky by default, it’s static. What version are you running? It hasn’t been sticky in quite a while

Since this is a Bootstrap specific question you’re better off asking on the Bootstrap mailing list

Thanks for the quick reply Ben. I’m running the latest Roots version.

I went over to the Bootstrap mailing list link you sent over and it seems the group has been closed, I don’t see any topics. Bummer. But I do seem to be missing something in terms of how Bootstrap’s nav is setup in order to make the customizations I need.

Oh damn. - hopefully they’re moving to Discourse :smile:

By adding .navbar { width: 940px; } you kill the responsiveness because you didn’t throw it within a media query. In app.less you can find this at the bottom:

@media (min-width: @screen-sm-min) { }

@media (min-width: @screen-md-min) { }

@media (min-width: @screen-lg-min) { }

Try throwing your rule within the min-width: @screen-lg-min media query. You could also try posting on StackOverflow or the Bootstrap IRC channel until their new discussion group is setup

Ah yes, thank you that makes a lot more sense, your recommended fix worked! It was breaking the responsiveness when I had the width rule not within the media query.

For what it’s worth, you can do these inline with LESS instead of using huge @media blocks

.navbar {
  width: 100px;
  @media (min-width: @screen-sm-min) { width: 200px; }
  @media (min-width: @screen-md-min) { width: 300px; }
  @media (min-width: @screen-lg-min) { width: 500px; }

Be thoughtful about how often you do it though - at this point LESS will turn every single one of those into blocks like this in the CSS output:

@media only screen and (min-width: 768px) {
  .navbar {
    width: 300px;

if you end up with 50 of those, no big deal. 300 though and you’ll feel a performance hit. It can be really handy for more complex styling setups though were keeping it all together can save some brain cells!

More info on it here:

Though perhaps a grunt task could combine them all into single media query blocks for production.