The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS menu button sticky, but off-canvas menu list is not

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #154397

    I’m stumped. I’ve apparently coded myself into a corner with the way I’ve structured this menu

    I cobbled together a CSS menu that slides in from the right side of the screen using tranformations. I’m using it in combination with a vertical scrolling responsive site. The intent is to make the entire menu (button and list) sticky.

    I fixed the position of the menu button (“showmenu”) but I’ve not been able to get the list to remain fixed no matter what I have tried. Instead the list scrolls up with the rest of the site. So if I scroll down a bit and click the menu button the panel still slides out from the right but the list is above and off the screen.

    Here’s the relevant HTML:

    <div class="interface"><div class="site-panel">
            <div id="panelClose"><i class="icon-remove"></i></div>
            <section class="nav" role="main-navigation">
                    <li class="active"><a href="#videos1">A</a></li>
                    <li><a href="#videos2">B</a></li>
                    <li><a href="#videos3">C</a></li>
                    <li><a href="#videos4">D</a></li>
                    <li><a href="#videos5">E</a></li>
                    <li><a href="#videos6">F</a></li>
                    <li><a href="#videos7">G</a></li>
                    <li><a href="#videos8">H</a></li>
            <li><a href="#videos9">I</a></li>
            <li><a href="#videos10">J</a></li>
                    <li><a href="#videos11">K</a></li>
        </div><!-- site-panel --><div class="headerwrapper stuck">
        <header role="banner">
            <div id="showMenu">
                <a href="#">Menu </a>
                <a href="#" class="burger"><i class="icon-reorder"></i></a>

    And the relevant CSS:

      .site-panel {
      position: absolute;
      top: 0;
      width: 218px;
      z-index: -20; }
    #panelClose {
      color: white;
      position: absolute;
      right: 18%;
      top: 6%; }
      @media (min-width: 767px) {
        #panelClose {
          right: 6%; } }
    .headerwrapper {
      height: 55px;
      position: absolute;
      width: 100%;
      z-index: 9999; }
      .headerwrapper header {
        position: absolute;
        width: 100%;
        padding: 1.2em 0; }
    .burger {
      padding-left: 5px;
      display: inline-block; }
    #showMenu {
      background: transparent;
      position: fixed;
      right: 6%;
      padding: .5em 1%;
      text-transform: uppercase;
      font-size: .875em;
      font-weight: 600; }
      @media (min-width: 1024px) {
        #showMenu {
          background: #222222; } }
      #showMenu a {
        text-decoration: none; }
    #showMenu a {
      font-size: 1.25em;
      color: white;
      display: inline-block;
      vertical-align: text-top; }
    .surface {
      overflow-x: hidden;
      position: relative;
      left: 0;
      -webkit-transition: all .6s ease-in-out;
      -moz-transition: all .6s ease-in-out;
      -ms-transition: all .6s ease-in-out;
      -o-transition: all .6s ease-in-out;
      transition: all .6s ease-in-out; }
    .site-panel {
      right: 0;
      -webkit-transition: all .4s ease-in-out;
      -moz-transition: all .4s ease-in-out;
      -ms-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out; }
    .surface.nav-show {
      -webkit-transform: translateX(-230px);
      -moz-transform: translateX(-230px);
      -ms-transform: translateX(-230px);
      -o-transform: translateX(-230px);
      transform: translateX(-230px); }
      @media (min-width: 767px) {
        .surface.nav-show {
          -webkit-transform: translateX(-270px);
          -moz-transform: translateX(-270px);
          -ms-transform: translateX(-270px);
          -o-transform: translateX(-270px);
          transform: translateX(-270px); } }
    .nav-show .site-panel {
      -webkit-transform: translateX(250px);
      -moz-transform: translateX(250px);
      -ms-transform: translateX(250px);
      -o-transform: translateX(250px);
      transform: translateX(250px);
      -webkit-transition-delay: .2s;
      -moz-transition-delay: .2s;
      -ms-transition-delay: .2s;
      -o-transition-delay: .2s;
      transition-delay: .2s;
      /* Safari */ }
      @media (min-width: 767px) {
        .nav-show .site-panel {
          -webkit-transform: translateX(250px);
          -moz-transform: translateX(250px);
          -ms-transform: translateX(250px);
          -o-transform: translateX(250px);
          transform: translateX(250px); } }
    .nav ul {
      list-style: none;
      padding-left: 0;
      padding-top: 0.5em; }
      .nav ul li {
        color: #999999;
        margin: 0.5em 0; }
        .nav ul li a {
          color: inherit;
          text-decoration: none; }
        .nav ul, .nav ul li:hover {
          color: white; }  

    Thank you very much for taking the time to show me another technique. I appreciate it.

    I’ve been experimenting with your code in an attempt to remove JS from the solution (I was hoping to accomplish what I need with just CSS) but I’ve been unsuccessful. Still, I’m glad I at least have something to work with. Thanks again!


    Ideally, I hope to implement this menu such that:

    1. as I scroll the page the menu remains available to the right, and
    2. when I mouse over the page and swipe or scroll down the menu it doesn’t disappear.

    Right now, not only does it not remain fixed to the right, but when I mouseover and gesture to pan down the menu (since it is longer than the display height) it disappears


    Five years ago but forgotten

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.