Map obscures main drop-down menus

  • dneale123

    (@dneale123)


    5 years, 11 months ago

    I’m using Leaflet Map as a replacement for Google Maps on our website, and have been tackling our large map showing volunteering opportunities in our area. After a bit of work I’ve managed to get the map to render fine with the correct markers on it, but it obscures the drop-downs in the main menu – if you hover over an item that has a sub-menu the sub-menu appears behind the map so is invisible.

    I saw the same on another site I’ve set up using a different theme but there was an easy workaround for that – I just moved the map down and added some descriptive text at the top of the page. In this case, however, the map is larger and I don’t want the bottom half to be off the screen.

    I’ve tried experimenting with the z-index of the map container div but this doesn’t make any difference. Are there any other suggestions?

    TIA,

    David.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter dneale123

    (@dneale123)

    5 years, 11 months ago

    Since my original post I’ve found that adding a z-index to .entry-content [.entry-content {position:relative; z-index:2;}] seems to work, although it doesn’t seem a very elegant way to do it. If anyone has a more general suggestion for maps I’d be pleased to hear 🙂

    Plugin Author bozdoz

    (@bozdoz)

    5 years, 11 months ago

    That is an excellent way to do it. The issue is related to CSS; your theme probably has a z-index that goes behind the z-index of the map. So, this is a great solution.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Map obscures main drop-down menus’ is closed to new replies.