Jump to content

Desktop Hamburger Menu on Left with Button on Right

Recommended Posts

Site URL: https://www.rlsignings.com

HELP! I have a client asking for a hamburger menu on the left of her desktop page with her currently active button left on the right of the screen.  She wants the mobile menu to be "normal" as it currently is.  

I've searched so many streams and I have no idea what kind of css to use to make this happen.  I can revert the current home page menu to a mobile hamburger style, but that inserts the button into the menu where my client would like it to stay in the header.  

How can I accomplish this?! 

Thank you!!!

Link to comment
  • Replies 3
  • Views 538
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, tuanphan said:

You mean replace menu text with burger icon? Add to Design > Custom CSS

a.header-nav-folder-title:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    font-size: 30px;
}

 

Yes, that is wonderful BUT now when we go to the mobile menu someone would have to click on the burger (or the word "menu") inside the burger to get to the actual links. Is there a code to bypass the folder itself and take a mobile viewer straight to the contents of hte folder without having to see that option in the mobile menu?

Link to comment
9 hours ago, aunderwood said:

Yes, that is wonderful BUT now when we go to the mobile menu someone would have to click on the burger (or the word "menu") inside the burger to get to the actual links. Is there a code to bypass the folder itself and take a mobile viewer straight to the contents of hte folder without having to see that option in the mobile menu?

Add this CSS

@media only screen and (max-width: 767px) {
  .header-menu-nav-folder[data-folder="root"] {
    display: none !important;
  }
  .header-menu-nav-folder-content .header-menu-controls {
    display: none;
  }
  .header-menu-nav-folder:not([data-folder="root"]) {
    transform: unset;
    transition: unset;
  }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.