<html> <head> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'> <link href='style.css' rel='stylesheet'> </head> <style> /* Initial body */ body { left: 0; margin: 0; overflow: hidden; position: relative; } /* Initial menu */ .menu { left: -285px; /* start off behind the scenes */ height: 100%; position: fixed; width: 285px; color: white; background-color: black; } /* Basic styling */ .jumbotron { height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0; } .menu li { border-bottom: 1px solid #636366; font-family: 'Open Sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px; } .menu a { color: #fff; font-size: 15px; text-decoration: none; text-transform: uppercase; } .icon-close { cursor: pointer; padding-left: 10px; padding-top: 10px; } .icon-menu { cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 16px; text-decoration: none; text-transform: uppercase; background-color: #FFA500; } .icon-menu i { margin-right: 5px; } </style> <body> <div class="menu"> <!-- Menu icon --> <div class="icon-close"> <h3 style="color: white;">BACK</h2> </div> <!-- Menu --> <ul> <li><a href="#">Scouts</a></li> <li><a href="#">Duty Rooster</a></li> <li><a href="#">Meal Plan</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- Main body --> <div class="jumbotron"> <div class="icon-menu"> <br> <h1 style="background-color: #FFA500; color: white;"> ☰ Scout Logs</h1> <br> </div> <a href="SCOUT ONE URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 1 </button> </a><a href="SCOUT TWO URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 2 </button> </a><a href="SCOUT THREE URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 3 </button> </a><a href="SCOUT FOUR URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 4 </button> </a><a href="SCOUT FIVE URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 5 </button> </a><a href="SCOUT SIX URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 6 </button> </a><a href="SCOUT SEVEN URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 7 </button> </a><a href="SCOUT EIGHT URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 8 </button> </a><a href="SCOUT NINE URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 9 </button> </a><a href="SCOUT TEN URL"> <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;"> Scout 10 </button> </a> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="app.js"></script> <script> var main = function() { /* Push the body and the nav over by 285px over */ $('.icon-menu').click(function() { $('.menu').animate({ left: "0px" }, 200); $('body').animate({ left: "285px" }, 200); }); /* Then push them back */ $('.icon-close').click(function() { $('.menu').animate({ left: "-285px" }, 200); $('body').animate({ left: "0px" }, 200); }); }; $(document).ready(main); </script> </body> </html>
That's because you set the body's overflow property to hidden. Try to set it to auto or, remove it (to apply the default value).
body
overflow
hidden
auto
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)