Use of Iframe causing disability of links - css

Question

I have an side navigation bar which toggles to hide and show on each click in the sidebar(contains a list links). And a iframe where i am displaying a website. when i click on a link it will hide the side bar and redirects it to corresponding url within the iframe area. The problem is in when i am displaying some websites inside iframe the links of that redirected websites will only work in top half portion of iframe and remaining in remaining half portion of iframe links are disabled. when i scroll inside iframe i.e when link in bottom half comes to top portion the links are enabled. 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>{{ Dashboard.d_name }}</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>Link</li>
<li>Link</li><li>Link</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>
Your main problem is the <div class="content pushed top_mar">. Pls check the attached screenshot. This div is overlapping over your iframe that's why links are not working in that region. The links above the div works as the upper portion is not covered by the div.
I'm not sure what is the purpose of the div for your application. If I set display:none all the links inside the iframe are clickable.