css - Sticky Footer not working with mobile responsive Off-Canvas Menu -
i using bootstrap sticky footer , off-canvas menu. sticky footer works fine on desktop view, footer begins overlap content on mobile view. think due .row-offcanvas position being set relative on mobile media query. if remove offcanvas menu sticky footer works expected on mobile devices. other issue when scroll down in mobile view white space appears under footer.
<!doctype html> <html lang="en"> <head> <!-- bootstrap core css --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- custom styles template --> <link href="css/master-simple.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <div class="row row-offcanvas row-offcanvas-left"> <header> <div class="container"> <div class="row"> <div class="col-xs-4 headerlinks"> <a href="#" class="hidden-xs">coverage details</a> <div id="drawernavigationid" data-toggle="offcanvas" class="hidden-sm"> <span></span> <span></span> <span></span> </div> </div> <div class="col-xs-4"> <a href="#" class="center-block"></a> </div> <div class="col-xs-4 text-right headerlinks"> <!-- click call on mobile device --> <a href="#" class="phoneicon visible-xs"></a> <a href="#" class="hidden-xs">contact us</a> </div> </div> </div> </header> <!-- off canvas menu --> <div class="container"> <div class="row"> <div class="col-sm-6 sidebar-offcanvas visible-xs"> <ul> <li><a href="coveragedetails.html" title="coverage details">coverage details</a></li> <li><a href="contact.html" title="contact us">contact us</a></li> </ul> </div> </div> </div> <!-- page content --> <div class="container mainwrapper"> <div class="row"> <div class="col-md-10 col-centered" id="confirmationwrapper"> <h2 class="noborderbottom">lorem ipsum dolor sit amet, consectetur adipiscing elit. donec laoreet tempor nisl, ut rutrum lacus vulputate vel.</h2> <h3>claim number: 12345678954</h3> <p class="claimnumbertext">nulla libero enim, consequat @ pulvinar eu, ultrices risus.</p> <p>nulla libero enim, consequat @ pulvinar eu, ultrices risus. mauris bibendum enim non magna maximus, non tempor lacus lacinia. fusce vestibulum tincidunt vulputate. suspendisse eu erat et neque facilisis consequat id in quam. cras convallis massa @ ornare hendrerit.</p> <div class="row text-center"> <a href="#" target="blank" class="shoplink">shop</a> </div> </div> </div> </div><!-- end page content --> <footer> <div class="container"> <ul> <li><a href="#">terms of use</a> | </li> <li><a href="#">privacy policy</a></li> </ul> <p>© 2015 anulla libero enim</p> </div> </footer> </div><!-- end container-fluid row --> </div><!-- end container-fluid --> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/offcanvas.js"></script> </body> </html> css:
html { position: relative; min-height: 100%; } body { /* margin bottom footer height */ margin-bottom: 196px; } * { font-weight: normal!important; margin: 0; padding: 0; outline: 0; outline-style: none; } header { font-family: 'aig_futura_medregular', aig_futura_medregular, arial, helvetica, sans-serif; position: absolute; top:0; z-index: 100; height: 92px; width: 100%; padding-top: 15px; color: #fff; background-color: rgba(0,164,228,0.9); } header { font-family: "aig_futuraregular", arial, helvetica, sans-serif; font-size: 18px; text-decoration: none; text-transform: uppercase; color: #fff!important; } header a:hover { border-bottom: 1px solid #fff; } header .headerlogo { width: 116px; height: 63px; cursor: pointer; background: url(../img/aiglogo.png) no-repeat center bottom; } .headerlinks { margin-top: 20px; } footer { font-size: 14px; position: absolute; bottom: 0; width: 100%; /* set fixed height of footer here */ height: 186px; padding: 40px 20px 20px; color: #fff; background-color: #252525; } footer ul { margin: 0 0 20px; padding: 0; list-style: none; } footer ul li { display: inline; } footer li { color:#fff; } .mainwrapper { margin-top: 92px; } @media screen , (max-width:768px){ #drawernavigationid{ padding-left: 10px; } #drawernavigationid span { display: block; width: 25px; height: 3px; background: #fff; margin-bottom: 7px; } .row-offcanvas { position: relative; bottom: 0; min-height: 100vh; -webkit-transition: .25s ease-out; -o-transition: .25s ease-out; transition: .25s ease-out; } .row-offcanvas-left { left: 0; } .row-offcanvas-left .sidebar-offcanvas { left: -85%; padding: 0 0 0 20px; background-color: #54565b; } .row-offcanvas-left .sidebar-offcanvas ul li { font-size: 18px; padding: 15px; text-transform: uppercase; border-bottom: 1px solid #696b6f; } .row-offcanvas-left .sidebar-offcanvas { text-decoration: none; color: #ffffff; } .row-offcanvas-left.active { left: 85%; } .sidebar-offcanvas { position: absolute; top: 0; bottom:0; width: 85%; } }
Comments
Post a Comment