Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CTA Links not working in responsive design
#1
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>
Visit my website www.sitebee.co.uk.
Reply
#2
line 142, of style.css .block holder: releative.
When you resize that div is obscuring your links and buttons.
My Github Repos: Github
Website: DigiMute
Reply
#3
Thanks ever so much n00dles101, that did the trick. Smile
Visit my website www.sitebee.co.uk.
Reply




Users browsing this thread: 1 Guest(s)