Customizing Navbar Width/Position

1

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!

2

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

3

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.

4

Oh damn. https://github.com/twbs/bootstrap/issues/11325#issuecomment-27712906 - 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

5

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.

6

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: http://alwaystwisted.com/post.php?s=2012-05-05-everyday-im-bubbling-with-media-queries-and-less

7

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