1

So I've made my custom theme using Bootstrap and everything is working all good and well expect from when I put it onto a tablet device. The problem I'm having is the Navbar doesn't collapse when the menu and the logo go onto the same line.

See Image Below: http://prntscr.com/9mewuw

The thing is it collapses fully on a mobile device just not on a tablet device like the iPad. I'm wondering what this is to do with.

  • Do you have an example of the navigation code to hand? Sounds like the collapsing isn't being called until a smaller responsive breakpoint. – Kieran McClung Jan 5 '16 at 16:24
  • Sorry for the late reply been busy with other things and yes I do, but it's only the bootstrap.css that you can get off the website the only difference with mine is that I removed container width. – Stephen Jan 5 '16 at 22:24
2

If you have a LESS version of Bootstrap (non-compiled) you need to change the @grid-float-breakpoint variable to 992px to get the navbar to collapse on "Tablet" (Medium) breakpoint. Source:

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

If not, and you've only made a couple of changes to Bootstrap, it would be best to download it again via the customiser: http://getbootstrap.com/customize/

Visit the page, search for @grid-float-breakpoint (about half way down the page) and change the value to @screen-md-min (see screenshot). This should then fix the problem for you.

enter image description here


If you'd rather not recompile Bootstrap the only other way would be create an overriding media query and copy all navbar references under the original media query (768px) into it. This isn't the ideal solution however to ensure that you get everything it would be worth looking for the bootstrap/less/navbar.less file on github (https://github.com/twbs/bootstrap/blob/master/less/navbar.less) Find any instance of @media (min-width: @grid-float-breakpoint) { ... } and that's the code you need to replace.

@media (min-width: 992px) {
    //All min-width: 768px navbar code
}
  • Yeah I had to recompile bootstrap and do all the changes I made to the Navbar again xD It works fine now though so thank you for your help good sir – Stephen Jan 6 '16 at 11:01
  • No problem at all, glad you got it sorted. You could always load in a separate stylesheet after Bootstrap and put your changes in there. That way it will override Bootstrap without directly affecting it so if you ever come to update Bootstrap in the future your changes won't be lost. – Kieran McClung Jan 6 '16 at 12:30

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.