Help with Bootstrap responsive menu 768px wide bug in Template

Envato Authors Theme Authors
1

Hi I purchased this template a few days ago and notice that there is a bug with the responsive menu when it transitions to the tablet 768px menu icon style with collapsable menu. Right before it goes into collapsable mode, right at 768px wide the entire menu collapses and shows all menu items until it goes smaller then 768px…so when viewing it on ipad portrait mode the menu is all messed up and shows the menu collapsed. Seems that there is 1px off somewhere because at 767px the collapsable menu is fine and at 769px the full horizontal menu is shown. I tried to mess around in the css and the bootstrap media queries but cant seem to pin point the bug. I tried going through the less files but Im not familiar with less so if something can point to the css where I can correct this issue it would be much appreciated…I also tried to contact the seller but I am still waiting for him to get back to me on there own support forum which seems to be backed up.

you can view the template here and the bug when viewing live preview.

thanks

2

Find this line @grid-float-breakpoint (if your template is using the LESS files) and change 768px to 767px or 769px (i’m confusing myself right now) I think. Maybe that will help.

Recompile after you’ve made the change

3

Hi, This template is done with bootstrap 3 and this is the difference between bootstrap 3 and older versions. bootstrap 3 doesn’t make collapse menu for 768px, it makes collapse for max 767px.

to resolve this problem try to increase for one px all @media (min-width: 768px) to @media (min-width: 769px) and @media (max-width: 767px) to @media (max-width: 768px) in bootstrap.css

but i’m not sure if you will need to change also somethink in bootstrap.js because collapsed menu should have some code lines also in script.

Hope it will help you

Regards Besim