Jump to content

Single page hamburger menu on mobile

Recommended Posts


I was wondering if anyone can suggest a way to have the hamburger navigation menu, which is organized in the usual folder structure, on a single page, where the folder elements are accessible by scrolling rather than clicking. Ideally the folder names would still be listed in a seperated font or something.

The folder structure should definetely still stay the same on desktop with the folders popping up when hovering over them.

I attached a quick mockup what I would imagine it to look like.


menu mockup.png

Link to comment
  • Replies 2
  • Views 517
  • Created
  • Last Reply

Some additional information I got.

I succesfully removed all content from the hamburger navigation menu on mobile using this CSS:

.header-menu-nav {
  visibility: hidden;

Additionally I was able to insert my own text using the :after tag in CSS:

.header-menu-nav:before {
  content: "";
  visibility: visible;
  white-space: pre;


This creates some awful bugs on the desktop site though, for example, depending on the amount of lines added through the content property, the upper part would not be clickable whatsoever anymore.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.