UPDATE: Issue Resolved! If you encounter the same problem, use the following solution:
Replace
nav {
position: fixed;
width: 100%;
}
with
nav {
position: fixed;
width: 100%;
z-index: 10;
}
I am currently working on a responsive website design using Bootstrap 4. My navigation menu consists of iframe and img tags in one section. However, when I scroll to the bottom of the page, the iframe overlaps with the header, which is sticky. You can view a gif demonstration here: Feel free to request additional CSS/HTML code sections for further clarification.
I attempted to assign the highest possible z-index to the header (nav menu) and change the display tag to block, but this only resulted in issues.
<style>
/* the entire header thing is in external .css file, I just put this here
to show you guys */
nav {
position: fixed;
width: 100%;
}
</style>
<div id="tab1" class="tab-pane active">
<h4><i class="fas fa-map-marker-alt"></i> Our Location <small>More like our favourite surf spot</small></h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6048.676068967504!2d-73.96889056972904!3d40.710574467186305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25bd9abcea3c7%3A0x34a2832eedb859d8!2sGiando+on+the+Water!5e0!3m2!1sfi!2sfi!4v1550400186363" width="100%" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>