Using Iframe Disabled Links

Question

I have a side navigation bar that switches to hide and show each click on the side bar (contains links to the list). And an iframe where I display the website. when I click on the link, it will hide the sidebar and redirect it to the corresponding URL in the iframe area. The problem is that when I display some websites inside the iframe, the links of these redirected websites will only work in the upper half of the iframe, and the remaining half of the remaining half of the iframe links are disabled. when I scroll inside the iframe ie when the link in the bottom half comes to the top, the links are included. Need help.

.menu_sample { position: absolute; top: 0; bottom: 0; left: 0; width: 100px; border: solid 1px; transition: transform 0.1s ease-out; } .content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; padding: 10px; transition: left 1s ease-out; margin-left: -1.5%; margin-top: 150%; } /*transition*/ .top_mar { margin-top: 25%; } /* on toggle*/ .content.pushed { left: 225px; } .hide { transform:translateX( -100px); } 

 <div class="menu_sample top_mar"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> {% for Dashboard in dashboards %} <li><a href="{{ Dashboard.d_url }}">{{ Dashboard.d_name }}</a></li> {% endfor %} </ul> </div> </div> <div class="content pushed top_mar"> <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button> </div> <div style="margin-left:-1%; margin-top:3.5%; height: 625px;" > <iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe> </div> 

Answer 1

 .menu_sample { position: absolute; top: 0; bottom: 0; left: 0; width: 100px; border: solid 1px; transition: transform 0.1s ease-out; } .content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; padding: 10px; transition: left 1s ease-out; margin-left: -1.5%; margin-top: 150%; } /*transition*/ .top_mar { margin-top: 25%; } /* on toggle*/ .content.pushed { left: 225px; } .hide { transform:translateX( -100px); } 

 <div class="menu_sample top_mar"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li><li><a href="#">Link</a></li> </ul> </div> </div> <div class="content pushed top_mar" style="display:none"> <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button> </div> <div style="margin-left:-1%; margin-top:3.5%; height: 625px;" > <iframe width="100%" height="95%" name="iframe_a" frameborder="0" src="http://en.wikipedia.org/wiki/Help:Link"></iframe> </div> 

The main issue is <div class="content pushed top_mar"> . Pls check the attached screenshot. This div overlaps your iframe, so links do not work in this region. Links on a div work like the top, not covered by a div.

I am not sure what the purpose of the div is for your application. If I set display:none , all links inside the iframe can be clicked.