Navbar-toggle button to appear on 768px size

1

Hi guys, I have a small issue on the navbar toggle button.

Right now the navbar button does not appear when I resize the browser to 768px browser size. How can I set the breakpoint that when it reaches browser/device size to 768px the button will appear? Have a look at my screenshot.

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

Will appreciate your help on this.

2

This is a Bootstrap related question.

In assets/less/bootstrap/variables.less change the variable @grid-float-breakpoint on line 232 to the breakpoint at which you would like your navbar to stop collapsing. (e.g. 790px)

I have tested this I assume it should work based on the comments.

2 Likes
3

Thank you enollo. That is very useful.

4

No problem.
If you plan on keeping Bootstrap up to date, I suggest making your own copy of variables.less and change the import in bootstrap.less (a file that will rarely change) to this custom file. This way you will not lose any of your customizations each time you update the files.

(assuming you are not doing this already)

5

Thanks again for the tip. There are lots to be learn for a beginner coder like me. I will do as you suggested so that it won’t get overwritten on updates. Cheers!

1 Like
6

You save my life, ty!!!