Placing Content Div on top of Google Map Element

[AshleyF]

Hi,

I am trying to place a content area element DIV on top of the Google Element element. I seem to be struggling to get the code working, as it’s sitting under the map and no changing of the z-index works.

<div id="floating-panel2">
<section class="dark" id="map"><div class="container"><div class="row"><div class="col-md-5 col-sm-7 animated location fadeInLeft visible" data-delay="0" data-animation="fadeInLeft">
					<h3>Location</h3>
						
				</div></div></div></section>

</div>

CSS

 #floating-panel2 {
   position: absolute;
  top: 10px;
  left: 25%;
  z-index: 2;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  line-height: 30px;
  padding-left: 10px;
}

[nico]

Hi @ocduk,

Thanks for writing in.

Add the z-index to the section where your code is added.

Hope it helps.

Let us know how it goes.

Thanks.

[AshleyF]

Perfect thank you, I was applying the z-index to the DIV not the section, that resolved.

On the same panel is it possible to create a (x) button in the top right to close it so the map shows (a bit like a popup menu)?

[jade]

Hi there,

That is possible but that would require further custom coding including Javascript code. As this is a customization the theme does not offer out of the box, this goes beyond the scope of our support.

Please check these links as these might give you some ideas:
https://www.w3schools.com/tags/ev_onclick.asp
https://api.jquery.com/remove/

Hope this helps.