Drop down menu hides behind content of page

Question

I'm working on making a Squarespace page with custom CSS to be mobile responsive. In a mobile screen, my page has a drop down menu with the different links for the page. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. I know this has to do with using position: absolute, but i have not found a way to have the placement of the menu button and drop down list as I want it by using position: relative. This is my CSS for the menu:

#mobileNav {
  background: none;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}

#mobileNav .wrapper {
  border-bottom-style: none;
  border-bottom-color: none;
}

You can view the page at richiequake.com using the password Help123. Is there another way I can have the placement of the menu button and the drop down list and have the list "push" the content of the page down so the link list is visible?

Have you tried using `z-index`? – Michelangelo Feb 11 '20 at 15:57 — Michelangelo, Feb 11 '20 at 15:57

Pedro Figueiredo · Accepted Answer · 2020-02-11T16:30:48.797

Basically, are you are missing is the z-index property. Which will place the container #mobileNav in a higher layer.

By making this change (adding z-index property to your CSS selector):

#mobileNav {
   background: none;
   position: absolute;
   top: 20%;
   left: 0;
   right: 0;

  z-index: 1;
}

I can now see the menu links in all pages. You can read more about the z-index spec here.

UPDATE - To also push the content down while using absolute positioning:

As you are already using a custom class to toggle the menu links, you can use that to also toggle the content section.

Add a selector rule as following to your stylesheet:

.menu-open~section#page {
     transform: translateY(355px);
}

What this will do is, when the menu-open class is in the document, the sibling section with id of page, will be pushed down 355px.

You can also add a some kind of animation if you want a smoother effect on pushing the content down, like so:

#page {
  margin-top: 100px;
  margin-bottom: 100px;
  opacity: 1;
  position: relative;

  transition: transform .3s linear;
}

I just added the transition, where the .3s is the time that the transition will take.

This does not really fix my issue because it just displays the menu on top of everything. I want the page contents to be pushed down when the menu opens. — feners, Feb 11 '20 at 16:22
Sorry, I didn't get that at first, but you can check my updated answer now, hope it helps! — Pedro Figueiredo, Feb 11 '20 at 16:31

Brandon · Answer 2 · 2020-02-11T17:33:01.570

0

One problem with using absolute positioning, even if you use transforms to compensate for it, is that on some devices and browser widths, the logo will overlap the navigation. Observe what the current solution renders:

Another problem is the delay between when the navigation collapses and when the text is no longer visible:

Because this is Squarespace and you don't have access to edit the underlying DOM, I would use flexbox to solve this. To do that, first get rid of this:

#mobileNav {
  background: none;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  z-index: 1;
}

And add this:

@media only screen and (max-width: 640px) {
  #canvas {
    display: flex;
    flex-direction: column;
  }
  #mobileMenuLink {
    order: 1;
  }
  #mobileNav {
    order: 2;
  }
  #header {
    order: 3;
  }
  #header ~ * {
    order: 4;
  }
}

Note that the above is not vendor-prefixed, so if you want to support older browsers, you'd correspondingly want to add vendor prefixing.

edited Feb 11 '20 at 17:33

answered Feb 11 '20 at 16:44

Brandon

3,572
2
12
27

I was confused regarding this. On some phones the page displays correctly with the logo and menu button placement on top corners. But for some reason some phones display like this but I assumed it was some sort of caching issue since thats how the website looked on mobile before I did any fixes. – feners Feb 11 '20 at 16:51
That is the issue with using fixed dimensions in pixels via CSS when dealing with elements that dynamically scale. You will end up with a compromise as mentioned. I also updated the above answer to mention a second issue as well. You can see these issues by simply narrowing your browser width slowly with the navigation open and observing. – Brandon Feb 11 '20 at 17:28

Drop down menu hides behind content of page

2 Answers2