CSS OffCanvas menu not working properly

davidjleys · July 3, 2017, 4:17pm

https://codepen.io/davidjleys/full/PjaBpO/
I have been stuck on this issue for a while. I am working on the personal portfolio here:

When the screen is <= 768px, the navbar dissappears and the mobile menu hamburger button appears. When that button is clicked, the menu slides out, as it should, however the content screen resets to the top of the screen. The menu should come out and not effect the other content in that way. I cannot figure out what is causing this.

To Replicate:

Make screen size less than 769px wide
Scroll part way to the next section (blank grid image)
Click the “hamburger” button in the top-left of the screen
When the menu is out, notice how the content has now reset to the top (as if it scrolled back up)

Any help would be appreciated.

HTML:

<!-- push-menu -->
<ul class="navigation">
   <h1 class="item">Navigation</h1>
        <a href="#"><li class="item"><i class="fa fa-home"></i> Home</li></a>
        <a href="#"><li class="item"><i class="fa fa-info-circle"></i> About</li></a>
        <a href="#"><li class="item"><i class="fa fa-book"></i> Portfolio</li></a>
        <a href="#"><li class="item"><i class="fa fa-address-book"></i> Contact</li></a>
 </ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"><i class="fa fa-bars"></i></label>
<!-- /push-menu -->

<!-- fixed-menu -->
<div id="fixed-menu">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
</div>
<!-- /fixed-menu -->


<div class="site-wrap">
  
 <div id="home" class="bg container-fluid">
   <div class="row">
     <div class="col-md-6">
       <div class="content">
         <h1 class="text-shadow">David J. Leys</h1>
         <h3>Full Stack Developer</h3>
       </div>
       <div class="button-array">
         <a href="#" role="button" class="btn btn-success dual-shadow">
           <i class="fa fa-briefcase"></i> View Portfolio
         </a>
         <a href="#" role="button" class="btn btn-warning dual-shadow">
           <i class="fa fa-github"></i> Github
         </a>
         <a href="#" role="button" class="btn btn-primary dual-shadow">
           <i class="fa fa-facebook"></i> Facebook
         </a>
         <a href="#" role="button" class="btn btn-info dual-shadow">
           <i class="fa fa-twitter"></i> Twitter
         </a>
       </div>
     </div>
     <div class="col-md-6">
     </div>
   </div>
 </div>
  
  <div id="about" class="bg containter-fluid">
    
 </div>
  
</div>

CSS:

/* general styles */
html, body {
  height: 100%;
  font-size: 16pt;
  font-family: 'Cabin', Helvetica, Arial, sans-serif;
}

 body { overflow-x: hidden; }

.text-shadow {
  text-shadow: 2px 2px 2px #000;
}

.box-shadow {
  box-shadow: 2px 2px 2px #000;
}

.dual-shadow {
  box-shadow: 2px 2px 2px #000;
  text-shadow: 2px 2px 2px #000;
}

.bg {
  height: 100%;
  position: relative;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* navigation */

/* push-menu */
.navigation {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  list-style: none;
  background-color: #333;
}

.site-wrap {
  height: 100%;
  width: 100%;
  background-color: white;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
}

.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2;
  
    width: auto;
    height: auto;
    cursor: pointer;
    box-shadow: 0 0 1px #fff;
}

.nav-trigger:checked + label {
    left: 315px;
}

.nav-trigger:checked ~ .site-wrap {
    left: 300px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

.nav-trigger + label, .site-wrap {
    transition: left 0.2s;
}

.navigation .item {
  margin: 0;
  border-bottom: 0.5px solid #000;
  padding: 0.54rem;
  padding-left: 1rem;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}

.navigation h1 {
  letter-spacing: 0.5rem;
  font-size: 1rem;
  color: #fff;
  background-color: #222;
}

.navigation li {
  letter-spacing: 0.2rem;
  background-color: #333;
  min-height: 2rem;
  font-size: 0.7rem;
}

.navigation li:hover {
  background-color: #222;
}

.navigation a {
  text-decoration: none;
}

.fa-bars {
  color: #000;
  padding: 8px;
  background-color: rgba(255,255,255,0.2);
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
/* /end push-menu */

/* fixed-menu */
.navbar-nav > li > a {
    padding: 8px;
    margin-right: 5px;
    font-size: 0.7rem;
    height: 28px;
}
.navbar { 
  min-height: 31px !important; 
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
  z-index: 2;
}
/* /end fixed-menu */

/* /end navigation */

/* pages sections */

/* home */
#home {
  background-image: url('http://res.cloudinary.com/davidjleys/image/upload/v1498932674/bg1_opt__tin_ghfohj.jpg');
}

#home .row, #home .col-md-6, #home .content {
  height: 100%;
}

#home .content, #home .button-array {
  position: relative;
  top: 30%;
}

#home .content {
  overflow: hidden;
  white-space: nowrap;
  margin: auto;
  text-align: center;
  height: auto;
  box-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}

#home h1 {
  background-color: rgba(0,0,0,0.8);
  color: #ddd;
  letter-spacing: 0.3rem;
  font-size: 1.7rem;
  margin: 0;
  padding: 5px;
}

#home h3 {
  margin: 0;
  font-weight: 500;
  padding: 5px;
  color: #000;
  background-color: #ddd;
}

#home .button-array {
  margin: 5px;
  margin-top: 5%;
  text-align: center;
}

#home .button-array a {
  margin: 5px;
  width: 5.909rem;
  min-height: 42px;
  padding: 10px;
}

/* about */
#about {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('http://res.cloudinary.com/davidjleys/image/upload/v1499089739/fzm-seamless.notebook.texture-04_i4pldz.jpg');
}

@media screen and (max-width: 768px) {
  .fixed-menu, #fixed-menu { display: none; }
  .navigation, .fa-bars { display: ""; }
}

@media screen and (min-width: 769px) {
  .fixed-menu, #fixed-menu { display: ""; }
  .navigation, .fa-bars { display: none; }
}

There also seems to be an issue with the “about” section background not scrolling fully on my mobile (Galaxy S4), but it scrolls fine in the mobile emulator (chrom dev tools).

Using bootstrap

Any advice on where I have gone wrong would be greatly appreciated, because I have looked over this code and messed with it more times than I can count and I am stuck.

https://codepen.io/davidjleys/full/PjaBpO/

JohnnyBizzel · July 3, 2017, 4:21pm

This is a copy of the W3Schools example:

davidjleys · July 3, 2017, 4:24pm

I appreciate that, but my issue is a bit different. My navbar button is fixed in the top left of the screen. The menu needs to be able to come out the same way regardless of where the user has scrolled to on the page (without scrolling back to the top).

JohnnyBizzel · July 3, 2017, 4:30pm

None of the links go anywhere so I will judge it when they do something. So far it works fine in my opinion.

CRUNKAHOLIC · July 3, 2017, 4:34pm

You talk about this @davidjleys ?

davidjleys · July 3, 2017, 4:36pm

yes, notice how whenever you click on the menu button, the main content reverts back to the top (if you were previously scrolled down). It shouldn’t do that.

Gwesolo · July 3, 2017, 4:47pm

My guess is it’s being caused by the .site-wrap having top:0px set, when the left value is changing during the menu movement, it’s snapping back up to that 0 point. There could be a JS script to help you with this, I personally can’t see a quick fix for it.

I’d recommend rebuilding the menu so it slides out over the body content, rather than have the menu layered behind like that and moving the body over to reveal it.

davidjleys · July 3, 2017, 4:52pm

Thanks for the response. I had it working as intended at one point, but I messed with too many other things to remember what it could have been. I think rebuilding the menu seems reasonable. If I cannot get anywhere on this today, then I will just build a new one that slides over. I am quite new to all this so it’s all a learning experience.

JohnnyBizzel · July 3, 2017, 5:22pm

but I messed with too many other things to remember what it could have been.

Remember you have the “Fork” option on codepen if you are making drastic changes.

davidjleys · July 3, 2017, 5:24pm

Honestly, I never even noticed it. I am very new to this. That will be extremely helpful in the future, though. Thanks for the tip.

davidjleys · July 5, 2017, 12:17pm

Well, it took me entirely too long but I figured out what the issue was. I am using a checkbox to toggle the navigation menu out and I forgot that the focus will go to the checkbox upon action (which is located at the top). After I added a visibility: hidden; to the checkbox, the focus issue is solved and my label can still be visible. I have still decided to redo it so that the navigation comes in from the left as that just seems like a smarter design. Anyway, watch out for those pesky checkboxes.

Topic		Replies	Views
Overlap issues on small screen devices HTML-CSS	7	1829	March 9, 2021
Mobile Navigation button not working JavaScript	24	3280	November 27, 2021
I don't know why my hamburger menu won't slide out HTML-CSS	6	364	September 7, 2023
Responsive nav-bar Issue	10	3969	June 1, 2021
Help - responsive navbar HTML-CSS	7	700	March 9, 2021

CSS OffCanvas menu not working properly

Related Topics