html - Use of Iframe causing disability of links -

i have side navigation bar toggles hide , show on each click in sidebar(contains list links). , iframe displaying website. when click on link hide side bar , redirects corresponding url within iframe area. problem in when displaying websites inside iframe links of redirected websites work in top half portion of iframe , remaining in remaining half portion of iframe links disabled. when scroll inside iframe i.e when link in bottom half comes top portion links 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>           {% 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>

.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>

your main problem <div class="content pushed top_mar">. pls check attached screenshot. div overlapping on iframe that's why links not working in region. links above div works upper portion not covered div.

i'm not sure purpose of div application. if set display:none links inside iframe clickable.