CTA Links not working in responsive design

[Sitebee]

I wonder if one of you talented people could help me out here with the theme I recently created for GS? The issue is ive made the theme responsive but the nav and social call to actions are not clickable.

I`ve never had this happen before and it`s starting boggle my brain a little, so hoping a fresh pair of eyes pick up the issue.


Demo: http://simplebee.co.uk


Here`s the css and html.

Nav CSS

Code:

.nav {
margin-bottom:15px;
padding:0 15px;

}

.nav ul {
list-style:none;
list-style-position:outside;
}

.nav ul li {
float:left;
font-family:Raleway, sans-serif;
font-size:15px;
font-weight:500;
padding:0 10px;
}

.nav ul li:first-child {
padding-left:0;
}

.nav ul li a {
color:#4a4a4a;
display:block;
height:21px;
line-height:21px;
border:2px solid transparent;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
padding:0 7px;

}

.nav ul li.active a,.nav ul li a:hover {
border:2px solid #029cdb;
background:url(../images/nav-btn.png) repeat-x 0 0;
color:#fff;
text-decoration:none;
}

Responsive CSS

Code:

@media only screen and (max-width: 767px) {
        .page { width: 380px; }
        .header { width: 300px; }
        .content { width: 360px; margin-top:60px;  }
        .block { display:none !important;}
                .fright { display:none !important;}

.social {
float:left;
width:300px;
margin-top:80px;
margin-left:50px;
display:inline;
}

.sidebar {
float:left;
width:360px;


}
      

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .page { width: 420px; }
        .header { width: 420px; }
        .content { width: 400px; }
        .block { display:none !important;}
        
.social {
float:left;
width:300px;
margin-top:80px;
margin-left:50px;
display:inline;
}

.sidebar {
float:left;
width:360px;


}

          }

Nav HTML

Code:

<nav class="nav">
                
                <ul>
            <?php get_navigation(return_page_slug()); ?>
                </ul>
            
                <div class="cl">&nbsp;</div>
                
                
            </nav>

[n00dles101]

line 142, of style.css .block holder: releative.
When you resize that div is obscuring your links and buttons.

[Sitebee]

Thanks ever so much n00dles101, that did the trick.