search

ppyordanov / Dynamic-Noise-and-Pollution-Map

A dynamically generated University of Glasgow noise and pollution campus map via the innovative Smart Citizen Kit developed in Barcelona, Spain by FabLab.
0 stars 0 forks source link

Menu Collapse Bug #73

Closed ppyordanov closed 9 years ago

ppyordanov commented 9 years ago

There seems to be a bug when using the collapsing mobile screen menu and Google maps on the same page. The menu items successfully get hidden in a drop-down menu for easy access, but nothing occurs when the toggle button is pressed:

toggle

ppyordanov commented 9 years ago

After an hour of trying to find the issue, it has been fixed. The problem was that the menu seems to work just as expected, but the Google map has a higher z-index and appears above it. Changing the container div's z-index css property still did not resolve the issue to 100% as the menu was being expanded with height: 100% on every page load. The solution involved using the "navbar-fixed-top" Bootstrap 3 navbar property.

I have also modified the menu to hide on every drop-down item selection/click:

//hide collapsed menu on click
$('.nav a').on('click', function(){
$(".navbar-toggle").click();
});

Here is the final result:

res