Opacity Issue with Modal Popup/Layering Issue

On this page there doesn’t seem to be problem with tablet/desktop devices displaying the video (click the ‘WATCH VIDEO’ button), with the exception that the layer seems to display behind the <header> layer (main menu, logo, etc.). The modal popup needs to be in front of other layers.

On phone devices, the color overlay (opacity) seems to be covering the whole video. I’m assuming it’s an indexing issue and the Bootstrap is handling it. Can anyone make out what’s the cause?


I am not weighing in on this issue. Instead, I’m just making a suggestion that when you are coding a site, that you validate your HTML as you go along.

(ignore the top line)


1 Like

Thank you, ronpat. I will need to forward this info. to the developer after I find a solution to the above issue.

Then you should at least fix the validation errors there.

You may just find that fixing those are the solution and there will be no need for “after”

Not only are there three divs that have an id of “site-navigation” but they each have two id values.

<div id="wysiwyg_widgets_widget-12" id="site-navigation" role="navigation">
<div id="nav_menu-9" id="site-navigation" role="navigation">
<div id="maxmegamenu-4" id="site-navigation" role="navigation">

Well somehow I was able to find the solution and fix the layering problem.

Thank you both for your insights.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.