Menu pushing content off page

[fullerpault]

The side menu is pushing content off of the page when it opens. See the two pictures for an example. Is this expected behavior, or is there a way to alter either the css or js to make it so that the menu floats above the content?

[Erin-Cecele]

Hi @fullerpault, thank you for the question. This is Quire functioning as intended. For many standard Quire publications, the width of the text is a bit narrower than what you have here, so the shift effect is less noticeable.

The float you are suggesting would be possible with CSS, but that extends beyond my capabilities. Perhaps someone from the community, maybe @daniel-keller, @mpopke, or @1000camels, has suggestions?

[daniel-keller]

This is definitely possible with a few css changes. @fullerpault which version of quire our you using?

[fullerpault]

Thanks @Erin-Cecele and @daniel-keller! I'm using v1.0.0-rc.32

[mpopke]

You'll probably want to move the side menu down below the top navbar so that the hamburger icon is still visible when the menu is expanded. That way the user can close the menu easily. This means that making this change in custom.css can be a little challenging because you need to know the height of the top nav to push the menu beneath it, and you can do that with CSS custom properties if you want, but it's easier to just edit the layout.scss file where the $navbar-height variable is already available.

In content/_assets/styles/layout.scss around line 107 (in the current version) you'll find the first lines of the declaration for .quire__secondary that look like this:

    .quire__secondary {
      height: 100%;
      position: fixed;
      top: 0;
      right: 0;
      transform: translate3d(calc(100% - 0rem), 0, 0);
      // transform: translateX(($quire-menu-width));
      transition-property: transform;
      transition-duration: 0.05s;
      transition-timing-function: linear; // transition: all 0.15s linear;
      // width: $quire-menu-width;
      display: block;
      z-index: 100;

and around line 133 of that same file you'll find &.is-expanded that looks like this:

      &.is-expanded {
        overflow-y: scroll;
        transform: translate3d(0, 0, 0);
        width: calc(#{$quire-menu-width} - 2em);
        // width: calc(100% - 3rem);
        @media screen and (max-width: $quire-menu-width) {
          width: calc(100% - 3rem);
        }

        #site-menu__inner {
          display: block;
        }

        + .quire__primary {
          // right: $quire-menu-width;
          // width: calc(100% - #{$quire-menu-width});
          // transform: translate3d($quire-menu-width, 0, 0);
          transform: translate3d(calc(-#{$quire-menu-width} + 2em), 0, 0);
          // position: fixed;
          // transform: translate3d(-352px, 0 ,0);
          @media screen and (max-width: $quire-menu-width) {
            // right: $quire-menu-width;
            // width: calc(100vh - #{$quire-menu-width});
            transform: translate3d(calc(-100% + 3rem), 0, 0);
            // right: calc(100vw - #{$navbar-height});
            // transform: translate3d(- $quire-menu-width, 0, 0);
            // width: #{$navbar-height};
          }
        }
      }

You can modify .quire__secondary declaration to look like this (changes in bold):

    .quire__secondary {
      height: calc(100vh - $navbar-height); // changes height of sidebar
      position: fixed;
      top: $navbar-height; // moves sidebar just beneath top nav
      right: 0;
      overflow-y: scroll; // sidebar scrolls vertically as separate container from main content
      overscroll-behavior-y: contain; // prevents sidebar scroll overflow from affecting main content
      transform: translateX(100%); // hides sidebar by default
      transition-property: transform;
      transition-duration: 0.05s;
      transition-timing-function: linear; // transition: all 0.05s linear;
      width: $quire-menu-width; // explicitly declare sidebar width
      max-width: 100vw; // defensive design for mobile to avoid horizontal scrolling on small phones
      display: block;
      z-index: 100;

…and modify the &.is-expanded declaration like this (really just delete most of it, but be careful that the brackets still balance when you're done):

      &.is-expanded {
        transform: translate3d(0, 0, 0); // or just translateX(0) should work, too

        #site-menu__inner {
          display: block;
        }
      }

That will:

• Push the sidebar just beneath the top nav
• Make the sidebar pop in over the main content rather than pushing the main content to the left
• Make it so that the sidebar scrolls vertically independently of the page content when the sidebar content is taller than the screen
• Make sure that the sidebar doesn't end up wider than the screen on mobile devices to avoid side-scrolling and weird container width layout bugs

There are definitely other approaches to handling the sidebar menu, and there might be some detail that we've missed with this CSS, but this is what we've been using in our quire publications (credit to @1000camels for the first version of this, which I've only modified a little).

[fullerpault]

Thank you so much, @mpopke! This worked perfectly.

[Erin-Cecele]

Thank you @daniel-keller and especially @mpopke for your generous support!