CODEWITHSUNDEEP
javascriptcsshtmlgoogle-maps
user3078794
user3078794

Reputation: 9

Menu bar under google map

I've got a problem with the google map, basically on the top of my website I've got a menu, which is always on the top, even if you scroll page down.

The CSS for the menu:

#MyMenu{
    width: 100%;
    height: 105px;
    position: fixed;
}

I got my Google map script from here.

And the problem is, when I scroll my page down to see Google map script, the menu hides under my Google map.

Is there is any way to make my menu always above all div and script? Because right now it goes under my Google map.

Upvotes: 1

Views: 1033

Answers (2)

SQRCAT
SQRCAT

Reputation: 5840

Assuming your map is wrapped in a specific element on your page, for instance:

<div id="gmap"></div>

You can use CSS to give it a z-index:

#gmap {
    z-index: 100;
    position: relative;
}

And give a higher z-index to #MyMenu:

#MyMenu {
    z-index: 110;
    width: 100%;
    height: 105px;
    position: fixed;
}

Upvotes: 1

jwinn
jwinn

Reputation: 1125

Try adding a high z-index value on your menu.

z-index:1000

It would need to be higher than the section containing the map. You may also need to define position:relative and a z-index on the menu's parent, if this seems to have no effect. You can test this out easily with FireBug or Chrome Developer tools.

Upvotes: 1

Related Questions