CODEWITHSUNDEEP
htmlcss
nessy hamsa
nessy hamsa

Reputation: 185

Responsive Website design issues

Hi I am trying to design a layout for the first time, the design should be responsive. After giving the body and htmlheight : 100% I am not able to click on my menu. Before that change responsive menu was working fine.

If I remove section and footer from the html and remove the height : 100% of body and html tag. I am able click on the menu. Can any one help me out to fix this issue. Two issues 1. Responsive menu not able to click 2. Footer is not at the bottom.

html code

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="Style.css">
    </head>
    <body>
        <header>
            <input type ="checkbox" id ="menuToggle" checked ="checked"/>
            <label for ="menuToggle" class ="menu-icon">&#9776</label>
            <div id ="logo">Heading</div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
        </header>
        <section>
            <p>
                Lorem Ipsum is simply dummy text of the printing and rem Ipsum has been 
            </p>
        </section>
        <footer>
            <div id="footer">
                <p>
                    Copyright © 2016 by sample.com. All Rights Reserved.
                </p>
            </div>
        </footer>
    </body>
</html>

css code

* {
    padding: 0;margin: 0;
}
html {
    height: 100%;margin:0;padding:0;
}
body {
    font-family: sans-serif;height: 100%;margin: 0;padding: 0;
    position: relative;
}
header {
    width: 100%;height: 100px;margin: auto;z-index: 99;background: #FFF;
    border-bottom: 1px solid #EEE;
}
section {
    height : 100%;top:50px;position:relative;
}
footer {
    width : 100%;background:#034676;height:20px;
    bottom:0px;position:relative;
}
a {
    text-decoration: none;color: blue;font-size: 14px;
}
li {
    list-style-type: none;
}
#logo {
    float: left;line-height: 50px;color: #147DC2;font-size: 30px;
}
header nav {
    width: 100%;text-align: center;
}
header nav ul {
    float: left;line-height: 50px;
}
header nav li {
    display: inline-block;
}
header nav a {
    padding: 10px;color: #f1e7d1;
}
header nav a:hover {
    background: #032976;color: #FFF;border-radius: 5px;
}
.main-nav {
    background: #034676;width: 100%;height: 50px;position: absolute;top: -101px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    z-index: -1;
}
.menu-icon {
    float : right;padding : 10px 20px;background : #034676;
    color : #FFF;cursor : pointer;border-radius : 5px;margin : 5px 5px 0 0;
}
#menuToggle {
    display: none;
}
#menuToggle:checked ~ .main-nav {
    position: absolute;top: 101px;
}

/********Responsive*/
@media screen and (max-width: 480px) {
    header nav li {
        display: block;
    }
    header nav a {
        display: block;padding :0;border-bottom : 1px solid #040376
    }
    header nav a:hover {
        border-radius: 0;
    }
    .main-nav {
        top : -350px;height : auto;
    }
    header nav ul {
        float : none;line-height : 50px;
    }
}

Upvotes: 1

Views: 158

Answers (2)

yaochiqkl
yaochiqkl

Reputation: 489

About the issue one: You put the z-index equals -1 and that's why link cant be clicked

.main-nav {
 z-index: 100;
}

About issue 2: you can't make middle section with equals 100%,that means it will occupy the whole window . Don't set it or set it auto. You set both of section and footer relative ,so footer can't follow section.

<section></section>
<footer></footer>

Default settings will be okay.

Look at this: 

header {width: 100%;height: 100px;margin: auto;z-index: 99;background: #FFF;
border-bottom: 1px solid #EEE;}

you put the header z-index equals 99 . So nav bar which has smaller z-index(default 0) is underneath header . Set z-index if neccessary rather than set it all the time. :)

Upvotes: 1

Shuvro
Shuvro

Reputation: 1499

Issue 1:

Remove the z-index: -1 from you .menu-nav class

Issue 2:

Use margin-top: 50px instead of top: 50px in section tag

Upvotes: 1

Related Questions