Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Single page hamburger menu on mobile


Posted (edited)


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

Edited by 8B39C8

Share this post

Link to post

2 answers to this question

Recommended Posts

  • 0

Can you share link to your site?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

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.

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...