1 reply [Last post]
t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 34 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Hello All!

I would really really appreciate some help. This is a responsive layout. When it gets to max-width :979px; the menu is supposed to be collapsed. However. It is open until you click on the menu. I want the menu to show collapsed as the default when the window hits 979px and lower.

Image Example: http://www.speakphoto.com/help/problem.html
Live HTML Example: http://www.speakphoto.com/help/

Code:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Responsive Wire 5.0</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type = "text/css">
 
	* { margin:0; padding:0; }
	a img { border-style:none; }
	a { text-decoration:none; } 
	ul li { list-style-type:none; margin:0; padding:0; }
	hr { margin:0; padding:0; display:none; }
 
	.none { display:none; }
 
	/* --------------- FLOAT --------------- */
	.left { float:left; }
	.right { float:right; }
	.fixed { position:fixed; }
	.absolute { position:absolute; }
	/* --------------- FLOAT --------------- */
 
	/* --------------- PERCENTAGES --------------- */
	.forty { width:40%; } .fifty { width:50%; } .eighty { width:80%; } .hundred { width:100%; }
	/* --------------- PERCENTAGES --------------- */
 
    body { font-family:Arial, Helvetica, sans-serif; }
	.body { float:left; width:100%; } 
 
	/* --------------- HREF ----------------------------------------- */
	a:link, a:visited { color:#000; }
	a:hover, a:active { color:#fff; }
	/* --- HEADER ----------------------------------------- */
	.home a { float:left; width:74px; height:75px; background-image:url(images/nav/002/home.gif); }
	.products a { float:left; width:129px; height:75px; background-image:url(images/nav/002/products.gif); }
	.guarantee a { float:left; width:137px; height:75px; background-image:url(images/nav/002/guarantee.gif); }
	.contact a { float:left; width:90px; height:75px; background-image:url(images/nav/002/contact.gif); }
	.policies a { float:left; width:88px; height:75px; background-image:url(images/nav/002/policies.gif); }
	.about a { float:left; width:94px; height:75px; background-image:url(images/nav/002/about.gif); }
	.order a { float:left; width:113px; height:75px; background-image:url(images/nav/002/order.gif); }
 
	.home a:hover { background-position:0 -75px; }
	.products a:hover { background-position:0 -75px; }
	.guarantee a:hover { background-position:0 -75px; }
	.contact a:hover { background-position:0 -75px; }
	.policies a:hover { background-position:0 -75px; }
	.about a:hover { background-position:0 -75px; }
	.order a:hover { background-position:0 -75px; }
	/* --- HEADER ----------------------------------------- */
	/* --------------- HREF ----------------------------------------- */
 
	/* --------------- HEADER ----------------------------------------- */
	.body > #header { float:left; width:100%; height:125px; background-image:url(images/menu.gif); background-repeat:repeat-x; }
	.logo { float:left; width:163px; height:75px; background-image:url(images/brantley-small.gif); }
	.body > #header > header > nav { float:left; }
	.body > #header > header > nav ul { float:left; height:75px; }
	.body > #header > header > nav ul li { float:left; margin-right:1px; }
	.body > #header > header > nav ul > li:last-child { margin-right:0px; }
	.cart { float:right; width:74px; height:75px; background-image:url(images/cart.gif); }
	.head_sub { float:left; width:73%; margin-top:10px; margin-left:25px; }
	.adjust { float:right; width:74.912%; }
	nav a#pull { display:none; }
	/* --------------- HEADER ----------------------------------------- */
 
	/* --------------- BODY ----------------------------------------- */
	#body { float:left; background-image:url(images/field.jpg); background-repeat:repeat-x; width:100%; }
	.post-info { font-style:italic; color:#999; font-size:90%; }
	.section { width:90%; background-image:url(images/boxes/body.gif); background-repeat:repeat; height:600px; margin:30px auto 10px auto; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;  box-shadow:0px 0px 2px 2px #999; -moz-box-shadow:0px 0px 2px 2px #999; -webkit-box-shadow:0px 0px 2px 2px #999; }
	/* --------------- BODY ----------------------------------------- */
 
	/* --------------- FOOTER ----------------------------------------- */
	#footer { float:left; width:100%; background-image:url(images/boxes/body.gif); background-repeat:repeat; }
	.foot_logo { margin:20px auto; width:184px; height:60px; }
	#footer > footer p { float:left; width:100%; text-align:center; padding:10px 0; }
	#footer > footer ul { float:left; width:100%; text-align:center; padding:20px 0; }
	#footer > footer ul li { display:inline; border-left-style:solid; border-left-width:1px; padding:0 20px; }
	#footer > footer ul li:first-child { border:none; }
	/* --------------- FOOTER ----------------------------------------- */
 
	/* --------------- FOOTER ----------------------------------------- */
	#mobile_footer { display:none; }
	/* --------------- FOOTER ----------------------------------------- */
	  @media only screen and (min-width:1200px)
 
	  { 
	  .body > #header {  }
	  .body > #header > header > nav ul { display:block; }
	  .head_sub { display:block; }
	  .logo { float:left; width:271px; height:125px; background-image:url(images/brantley-nutrition.gif); }
 
	  /* --- HEADER ----------------------------------------- */
	  .home a { float:left; width:88px; height:75px; background-image:url(images/nav/home.gif); }
	  .products a { float:left; width:148px; height:75px; background-image:url(images/nav/products.gif); }
	  .guarantee a { float:left; width:161px; height:75px; background-image:url(images/nav/guarantee.gif); }
	  .contact a { float:left; width:102px; height:75px; background-image:url(images/nav/contact.gif); }
	  .policies a { float:left; width:103px; height:75px; background-image:url(images/nav/policies.gif); }
	  .about a { float:left; width:110px; height:75px; background-image:url(images/nav/about.gif); }
	  .order a { float:left; width:135px; height:75px; background-image:url(images/nav/order.gif); }
 
	  .home a:hover { background-position:0 -75px; }
	  .products a:hover { background-position:0 -75px; }
	  .guarantee a:hover { background-position:0 -75px; }
	  .contact a:hover { background-position:0 -75px; }
	  .policies a:hover { background-position:0 -75px; }
	  .about a:hover { background-position:0 -75px; }
	  .order a:hover { background-position:0 -75px; }
 
	  .body > #header > header > nav a#pull { display:none; }
	  /* --- HEADER ----------------------------------------- */
	  }
 
	  @media only screen and (min-width:768px) and (max-width:979px)
 
	  { 
	  /* --- HEADER ----------------------------------------- */  
	  .body > #header { float:left; }
	  .body > #header > header > nav ul { float:left; height:auto; background-color:#000; width:532px; }
	  .body > #header > header > nav ul li { float:left; background-color:#000; width:530px; height:29px; margin-left:1px; margin-top:1px; }
	  .slide_hold { position:absolute; width:532px; height:auto; border-style:solid; background-color:#000; }
	  .body > #header > header > nav a#pull {  width:532px; display:block; }
	  .body > #header > header > nav a#pull:after { float:left; display:block; content:""; background: url(images/navigation.gif) no-repeat; width:129px; height:25px;  margin-top:25px; margin-left:20px; padding-bottom:19px;  }
	  .head_sub { display:block; }
 
	  .home a { float:left; width:530px; height:29px; background-image:url(images/nav/003/home.gif); }
	  .products a { float:left; width:530px; height:29px; background-image:url(images/nav/003/products.gif); }
	  .guarantee a { float:left; width:530px; height:29px; background-image:url(images/nav/003/guarantee.gif); }
	  .contact a { float:left; width:530px; height:29px; background-image:url(images/nav/003/contact.gif); }
	  .policies a { float:left; width:530px; height:29px; background-image:url(images/nav/003/policies.gif); }
	  .about a { float:left; width:530px; height:29px; background-image:url(images/nav/003/about.gif); }
	  .order a { float:left; width:530px; height:29px; background-image:url(images/nav/003/order.gif); }
 
	  .home a:hover { background-position:0 -29px; }
	  .products a:hover { background-position:0 -29px; }
	  .guarantee a:hover { background-position:0 -29px; }
	  .contact a:hover { background-position:0 -29px; }
	  .policies a:hover { background-position:0 -29px; }
	  .about a:hover { background-position:0 -29px; }
	  .order a:hover { background-position:0 -29px; }
	  /* --- HEADER ----------------------------------------- */  
 
	  /* --------------- BODY ----------------------------------------- */
	  #body > .section { width:90%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#CCC; margin:30px auto 10px auto; }
	  /* --------------- BODY ----------------------------------------- */
 
	  /* --------------- FOOTER ----------------------------------------- */
	  #footer > footer > nav a:link, #footer > footer > nav a:visited { color:#000; float:left; width:100%; padding:10px 0px; height:20px; }
	  #footer > footer > nav a:hover, #footer > footer > nav a:active,  #footer > footer > nav .active a:link, #footer > footer > nav .active a:visited { float:left; width:100%; background-color:#CCC; text-shadow:none; }
	  #footer > footer > nav ul li a { float:left; width:100%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
 
	  #footer > footer > nav ul li { width:50%; float:left; border-style:none; margin:0; padding:0; }
	  /* --------------- FOOTER ----------------------------------------- */
 
	  /* --------------- MOBILE FOOTER ----------------------------------------- */
	  #mobile_footer { float:left; width:100%; height:900px; background-color:#F00; } 
	  /* --------------- MOBILE FOOTER ----------------------------------------- */
	  }
 
	  @media only screen and (max-width:767px)  
	  { 
 
	  /* --- HEADER ----------------------------------------- */  
	  .body { font-size:95%; } 
	  .body > #header > header > nav ul { display:none; }
	  .body > #header > header > nav a#pull { width:530px; display:block; }
	  .body > #header > header > nav a#pull:after { float:left; content:""; background: url(images/navigation.gif) no-repeat; width:129px; height:25px;  margin-top:25px; margin-left:20px; padding-bottom:25px; }
	  /* --- HEADER ----------------------------------------- */  
 
	  /* --------------- BODY ----------------------------------------- */
 
	  #body > .section { width:90%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#CCC; margin:30px auto 10px auto; }
	  .section p { }
	  .post-info { display:none; }
	  /* --------------- BODY ----------------------------------------- */
 
	  /* --------------- FOOTER ----------------------------------------- */
	  #footer {display:none; }
	  /* --------------- FOOTER ----------------------------------------- */
 
	  /* --------------- MOBILE FOOTER ----------------------------------------- */
	  #mobile_footer { display:block; float:left; width:100%; border-style:dashed; border-width:1px; border-color:#000; } 
	  #mobile_footer > ul { float:left; width:100%; }
	  #mobile_footer > ul li { float:left; width:49%; display:inline; text-align:center; padding:15px 0; border-right-style:solid; border-right-width:1px; background-color:#666; }
	  #mobile_footer > ul li:last-child { border:none; }
	  /* --------------- MOBILE FOOTER ----------------------------------------- */
	  }
 
	  @media only screen and (max-width:480px)  
	  { 
 
	  .body > #header {  }
	  .head_sub { display:none; }
 
	  /* --- HEADER ----------------------------------------- */  
	  .body { font-size:95%; } 
	  .body > #header > header > img { width:100%; }
	  .body > #header > header > nav ul { float:left; display:none; height:auto; }
	  .body > #header > header > nav a#pull { width:530px; display:block; }
	  .body > #header > header > nav a#pull:after { float:left; content:""; background: url(images/navigation.gif) no-repeat; width:129px; height:25px;  margin-top:25px; margin-left:20px; padding-bottom:25px; }
 
	  .home a { float:left; width:530px; height:29px; background-image:url(images/nav/003/home.gif); }
	  .products a { float:left; width:530px; height:29px; background-image:url(images/nav/003/products.gif); }
	  .guarantee a { float:left; width:530px; height:29px; background-image:url(images/nav/003/guarantee.gif); }
	  .contact a { float:left; width:530px; height:29px; background-image:url(images/nav/003/contact.gif); }
	  .policies a { float:left; width:530px; height:29px; background-image:url(images/nav/003/policies.gif); }
	  .about a { float:left; width:530px; height:29px; background-image:url(images/nav/003/about.gif); }
	  .order a { float:left; width:530px; height:29px; background-image:url(images/nav/003/order.gif); }
 
	  .home a:hover { background-position:0 -29px; }
	  .products a:hover { background-position:0 -29px; }
	  .guarantee a:hover { background-position:0 -29px; }
	  .contact a:hover { background-position:0 -29px; }
	  .policies a:hover { background-position:0 -29px; }
	  .about a:hover { background-position:0 -29px; }
	  .order a:hover { background-position:0 -29px; }
	  /* --- HEADER ----------------------------------------- */
 
	  /* --- BODY ----------------------------------------- */  
	  #body > .section { width:95%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#CCC; margin:30px auto 2% auto; padding:0px; }
	  .section p { }
	  .post-info { display:none; }
	  /* --- BODY ----------------------------------------- */ 	
 
	  /* --------------- FOOTER ----------------------------------------- */
	  #footer > footer > nav a:link, #footer > footer > nav a:visited { color:#000; float:left; width:100%; padding:10px 0px; height:20px; }
	  #footer > footer > nav a:hover, #footer > footer > nav a:active,  #footer > footer > nav .active a:link, #footer > footer > nav .active a:visited { float:left; width:100%; background-color:#CCC; text-shadow:none; }
	  #footer > footer > nav ul li a { float:left; display:block; width:100%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
	  #footer > footer > nav ul li { width:100%; border-style:none; padding:0; }
	  /* --------------- FOOTER ----------------------------------------- */
 
	  /* --------------- MOBILE FOOTER ----------------------------------------- */
	  #mobile_footer { display:block; float:left; width:100%; border-style:dashed; border-width:1px; border-color:#000; } 
	  #mobile_footer > ul { float:left; width:100%; }
	  #mobile_footer > ul li { float:left; width:49%; display:inline; text-align:center; padding:15px 0; border-right-style:solid; border-right-width:1px; background-color:#666; }
	  #mobile_footer > ul li:last-child { border:none; }
	  /* --------------- MOBILE FOOTER ----------------------------------------- */
	  }
    </style>
    <!-- css3-mediaqueries.js for IE8 or older -->
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
          $(function() {
              var pull 		= $('#pull');
                  menu 		= $('nav ul');
                  menuHeight	= menu.height();
 
              $(pull).on('click', function(e) {
                  e.preventDefault();
                  menu.slideToggle();
              });
              $(window).resize(function(){
                  var w = $(window).width();
                  if(w > 0 && menu.is(':hidden')) {
                      menu.removeAttr('style');
                  }
              });
          });
      </script>
</head>
 
<body class = "body">
 
    <!----------------- HEADER ----------------->
    <div id = "header">
      <header>
        <div class = "logo"></div>       
        <nav>
          <div class = "slide_hold">
            <a href="#" id="pull"><span class = "none">Menu</span></a>
            <ul>
              <li class = "home"><a href = "#"><span class = "none">Home</span></a></li>
              <li class = "products"><a href = "#"><span class = "none">Products</span></a></li>
              <li class = "guarantee"><a href = "#"><span class = "none">Guarantee</span></a></li>
              <li class = "contact"><a href = "#"><span class = "none">Contact</span></a></li>
              <li class = "policies"><a href = "#"><span class = "none">Policies</span></a></li>
              <li class = "about"><a href = "#"><span class = "none">About</span></a></li>
              <li class = "order"><a href = "#"><span class = "none">Order</span></a></li>
            </ul>
          </div>
        </nav>
        <div class = "cart"></div>
        <div class = "head_sub"><img src = "images/improving-lives-through-better-nutrition.png" alt = "Improving Lives Through Better Nutrition" title = "Improving Lives Through Better Nutrition" width = "457" height = "25" class = ""></div>
      </header>
    </div>
    <!----------------- HEADER ----------------->
 
    <!----------------- BODY ----------------->
 
    <!----------------- BODY ----------------->
 
    <!----------------- FOOTER ----------------->
    <div id = "footer">
        <footer>
            <div class = "foot_logo"><img src = "images/brantley-nutrition.png" width = "184" height = "60" alt = "Brantley Nutrition"></div>
            <nav>
                <ul>
                    <li class = "active"><a href = "#">Home</a></li>
                    <li><a href = "#">About</a></li>
                    <li><a href = "#">Portfolio</a></li>
                    <li><a href = "#">Contact</a></li>
                    <li><a href = "#">Terms</a></li>
                    <li><a href = "#">Privacy</a></li>
                    <li><a href = "#">DMCA</a></li>
                </ul>
            </nav>
        </footer>
    </div>
    <!----------------- FOOTER ----------------->
 
    <!----------------- MOBILE FOOTER ----------------->
    <div id = "mobile_footer">
        <ul>
            <li>Point One</li>
            <li>Point Two</li>
        </ul>
    </div>
    <!----------------- MOBILE FOOTER ----------------->
</body>
</html>

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 34 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Figured it Out

.body > #header > header > nav ul { float:left; height:auto; display:none; background-color:#000; width:532px; }

display:none;