1

I am realtively new to HTML/CSS and working on a responsive site. I'm sure I have some improper techniques at this point but aesthetically things are working okay for me so far. MY problem is functional when my screen size gets below full view. Around 768 only 1 link (the contact link) seems to work and I'm not sure why. Any help would be much appreciated! Thanks!

HTML:

</head>
<body>
<div id="wrapper">
    <div id="header">
     <h1>my<br/>name</h1>
        <div id="nav">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">SERVICES</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>

    </div>
    <div id="content">
        <div id="feature">
            <p>Feature</p>
        </div>
        <div class="article column1">
            <p>Column One</p>
        </div>
        <div class="article column2">
            <p>Column Two</p>
        </div>
        <div class="article column3">
            <p>Column Three</p>
        </div>
    </div>
    <div id="footer">
        <p>Footer Text</p>
    </div>

    </div>
    </body>
 </html>

CSS: 

body {
    max-width: 90%;
    margin: 0 auto;
    font-size: 100%;
     }



h1 {
    font-family: 'bikoblack';
    text-transform: uppercase;
    font-size: 3em;
    line-height: 85%;
    color: #2d9471;
    background-color: #1a5642;
    float: left;
    padding: 1em;
    }



    #header {
    overflow: hidden;
    z-index: ""; 
    }

#nav {
    position: relative;
    top: 11em; 
    margin-bottom: 1 em;
    }

li {
    display: inline;
    font-family: 'bikoregular';
    color: #2d9471;
    padding: 4em;
    }



#feature{
    margin: 1%;
    background-color: #1a5642;
    padding: 5em;
    }


.column1, .column2, .column3 {

    width: 31.3%;
    float: left;
    margin: 1%;
    background-color: #1a5642;
    }

.column3 {
    margin-right: 0%;}
    }

#feature, .article {
    margin-bottom: 1em;
        }

 @media (max-width:480px){
#nav {
    position: relative;
    top:.05em;
    width:200px;


    }    
}

 @media (max-width:767px) and (min-width:481px){
#nav {
    position: relative;
    top: 5em; 


    }    
}
Bill
  • 97
  • 2
  • 9
user1527555
  • 155
  • 1
  • 9

1 Answers1

1

The list items in your navigation have a large padding and they are also positioned inline. When they break on the next line (because there is not enough horizontal space) they overlap. The padding of the ones coming last in the list extend over the links above and cover them up. That's why you can't click them.

Try this as a quick fix:

li {
    display: inline;
    font-family: 'bikoregular';
    color: #2d9471;
    padding: 0 4em; /* removed padding at the top and bottom */
}
janwschaefer
  • 609
  • 3
  • 6