0

I have CSS only off canvas nav with working scroll. The nav is for desktop, tablet and mobile devices. The issue is I don't want it to be fixed to the top anymore.

When I remove “position:fixed” it gives me a set of problems with position, double scrollbars and the nav menu is not working proper anymore.

What am I missing or overlooking for this issue?

My snippet:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

#fix-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 60px;
  background-color: #00a8eb;
}

#fix-bar .logo {
  position: absolute;
  left: 0;
  width: 250px;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

#fix-bar .logo a {
  display: block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 24px;
  width: 60px;
  height: 24px;
  padding: 18px 16px 18px 24px;
  box-sizing: content-box;
}

#fix-bar .push {
  position: relative;
  left: 0;
  height: 100%;
  background-color: #00a8eb;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.hamburguer {
  width: 72px;
  height: 60px;
  display: block;
  position: relative;
  cursor: pointer;
}

.hamburguer span {
  display: block;
  position: absolute;
  height: 4px;
  width: 24px;
  background: #fff;
  opacity: 1;
  left: 24px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.hamburguer span:nth-child(1) {
  top: 20px;
}

.hamburguer span:nth-child(2),
.hamburguer span:nth-child(3) {
  top: 28px;
}

.hamburguer span:nth-child(4) {
  top: 36px;
}

#canvas {
  position: relative;
  height: 100%;
  padding-top: 60px;
  overflow: hidden;
}

#nav {
  overflow-y: scroll;
  position: absolute;
  left: 0;
  height: 100%;
  width: 250px;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  padding-top: 12px;
  padding-bottom: 60px;
}

#nav a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 14px 24px;
  font: 20px/1 'Montserrat', sans-serif;
  font-weight: 700;
}

#nav a:hover {
  background-color: #eee;
}

#nav .site-menu {
  position: relative;
  min-height: 100%;
  padding-bottom: 60px;
}

#nav .copy {
  position: absolute;
  bottom: 0;
  padding: 16px 24px;
  font-size: 12px;
  line-height: 1.4;
}

#content {
  background-color: #fff;
  overflow-y: scroll;
  position: relative;
  left: 0;
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  padding: 20px;
}

.mask {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease, z-index 0s 0.5s, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, z-index 0s 0.5s, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, z-index 0s 0.5s;
  transition: opacity 0.5s ease, transform 0.5s ease, z-index 0s 0.5s, -webkit-transform 0.5s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

input#show-menu {
  position: absolute;
  opacity: 0;
}

input#show-menu:checked~#fix-bar .push {
  -webkit-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}

input#show-menu:checked~#fix-bar .hamburguer span:nth-child(1),
input#show-menu:checked~#fix-bar .hamburguer span:nth-child(4) {
  top: 28px;
  width: 0;
  left: 50%;
}

input#show-menu:checked~#fix-bar .hamburguer span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input#show-menu:checked~#fix-bar .hamburguer span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input#show-menu:checked~#canvas .mask {
  z-index: 1;
  opacity: 1;
  -webkit-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

input#show-menu:checked~#canvas #nav,
input#show-menu:checked~#fix-bar .logo {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

input#show-menu:checked~#canvas #content {
  -webkit-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}
<input type="checkbox" id="show-menu">

<div id="fix-bar">
  <div class="logo">
    <a href="/">Branding</a>
  </div>

  <div class="push">
    <label class="hamburguer" for="show-menu">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </label>
  </div>
</div>

<div id="canvas">

  <div id="nav">
    <ul class="site-menu">
      <li><a href="#/work">1</a></li>
      <li><a href="#/work">2</a></li>
      <li><a href="#/work">3</a></li>
      <li><a href="#/work">4</a></li>
      <li><a href="#/work">5</a></li>
      <li><a href="#/work">6</a></li>
      <li><a href="#/work">7</a></li>
      <li><a href="#/work">8</a></li>
      <li><a href="#/work">9</a></li>
      <li><a href="#/work">10</a></li>
      <li><a href="#/work">11</a></li>
      <li><a href="#/work">12</a></li>
      <li><a href="#/work">13</a></li>
      <li><a href="#/work">14</a></li>
      <li><a href="#/work">15</a></li>
      <li><a href="#/work">16</a></li>
      <li><a href="#/work">17</a></li>
      <li><a href="#/work">18</a></li>
      <li><a href="#/work">19</a></li>
      <li><a href="#/work">20</a></li>
    </ul>
  </div>

  <label for="show-menu" class="mask"></label>

  <div id="content">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
Kees
  • 92
  • 10
  • Can you show an concept of what you want (print)? – Maxwell s.c Oct 09 '17 at 16:53
  • the concept that I want is a off canvas navigation with css without the sticky header/ bar. The menu needs to be able to scroll down where the content dows not scroll when the menu is open, and closing when click on content. – Kees Oct 09 '17 at 18:40
  • The problem is the HTML organization. The Header isn't inside the scrollable div to be scrolled. You will need to reorganize HTML and style. Put the header inside the scrollable element and make it height the viewport height (currently its inside an div that placeholds the bar). – Maxwell s.c Oct 09 '17 at 18:48
  • I have this [codepen](https://codepen.io/svinkle/pen/vCfoK) as example, but when the off canvas items are more then the screen can show, you can not scroll. – Kees Oct 09 '17 at 18:56
  • 1
    Check this pen: https://codepen.io/MaxViewUp/pen/YrvaBW use 100VH and overflow auto. Does the trick. – Maxwell s.c Oct 11 '17 at 14:00
  • Thx at lot Maxwell, that is usefull! – Kees Oct 13 '17 at 12:50

0 Answers0