0

I want to change the breakpoint of the Bootstrap Responsive Menu, from 768px to 900px. There is a simple way to do this by modifying @grid-breakpoint in variables.less; I have installed the less module, but yet changes there are not having any effect.

The code for the media query is being called in bootstrap.min.css via CDN. Can someone help? How do you recompile the CSS after making changes to the .less file?

On Bootstrap's site you can configure what you want and download; in Drupal this isn't the case, nor is there any config in the admin UI, to make these simple changes.

2

You can override the set media queries in your custom css or less files. For the menu, you need to change at least two classes like so:

To hide the menu in a wider breakpoint (> 768)

@media (max-width: 900px){
  .navbar-toggle {
    display: none;
  }
  .navbar-collapse.collapse {
    display: block;
  }
}

To hide the menu in a smaller breakpoint (< 768) you have to override everything from your breakpoint up to 768:

@media (min-width: 480px) and (max-width: 768px){
  .navbar-toggle {
    display: none;
  }
  .navbar-collapse.collapse {
    display: block;
  }
}
  • Thanks, I'll give that a whirl, what is the best way to compile the less with Drupal Bootstrap, so I actually have control from there and can modify? – Ant Power Apr 26 '14 at 14:26
  • Here's a module you can try: drupal.org/project/less Once you compile, sometimes you need to clear cache to see the changes. – Juls May 1 '14 at 0:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.