CODEWITHSUNDEEP
jqueryhtmlcss
Sol-Dev-993
Sol-Dev-993

Reputation: 63

fixed header with responsive design

I am trying to learn a tutorial from the net, but I basically did everything it says but for some reason the menu is not showing up while the screen goes small.

    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>New Header Design</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">

body{

margin :0;
padding: 0;
font-family: sans-serif;


}

header{

    background :#00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}

nav ul {

background-color :#43a286;
overflow :hidden;
color: white;
padding : 0;
text-align: center;
margin:0;
-webkit-transition : max-height 0.4s;
-ms-transition : max-height 0.4s;
-moz-transition : max-height 0.4s;
-o-transition : max-height 0.4s;
-webkit-transition : max-height 0.4s;
}
nav ul li {

    display: inline-block;
    padding :20px;
}

nav ul li:hover{

    background-color:#399077;
}
a{

    text-decoration: none;
    color:inherit;
}
section{

    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}
@media screen and (max-width: 580px){

    nav ul{
        max-height:0;
    }
    .showing {
        max-height: 20em;
    }

    nav ul li{
        box-sizing: border-box;
        width:100%;
        padding:15px;
        text-align: left;

    }
    .handle{
        display:block;
    }

}
.handle{

    width:100%;
    background:#005c48;
    text-align : left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor:pointer;
    color: white;
    display: none;
}
</style>

</head>
<body>
    <header>
        <h1>Website Created</h1>
    </header>
    <nav>   
        <ul>
            <a href="#"><li>HOME</a></li>
            <a href="#"><li>ABOUT</a></li>
            <a href="#"><li>BLOG</a></li>
            <a href="#"><li>SHOP</a></li>
            <a href="#"><li>CONTACT</a></li>
        </ul>
        <div class ="handle"> <h1>Menu</h1></div>


    </nav>
    <section>
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    </section>
    <script>
$('.handle').on('click', function(){

    $('nav ul').toggleClass('showing');
});
    </script>

</body>
</html>

So I am guessing that the jquery might not be right or there has to be some errors with classes while shrinking it down to mobile view. Need some help thanks.

Upvotes: 0

Views: 56

Answers (1)

henrik123
henrik123

Reputation: 1683

This is because the handle-class

.handle{
 width:100%;
 background:#005c48;
 text-align : left;
 box-sizing: border-box;
 padding: 15px 10px;
 cursor:pointer;
 color: white;
 display: none;
}

is called after the media query. Move the handle-class before the media-query like this and it will work.

.handle{

width:100%;
background:#005c48;
text-align : left;
box-sizing: border-box;
padding: 15px 10px;
cursor:pointer;
color: white;
display: none;
}
@media screen and (max-width: 580px){

nav ul{
    max-height:0;
}
.showing {
    max-height: 20em;
}

nav ul li{
    box-sizing: border-box;
    width:100%;
    padding:15px;
    text-align: left;

}
.handle{
    display:block;
}

}

Upvotes: 2

Related Questions