Jump to content

Apply mobile hamburger menu to desktop view

Recommended Posts

I would like my desktop view to use the hamburger icon and drop down navigation menu, the way it displays on mobile. I do not want the navigation links displayed directly on the page. I'm having trouble finding the right code for this. My URL is casacrudo.com

Link to comment
  • Replies 1
  • Views 649
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

@Summr Hi! To display the hamburger icon and dropdown menu on desktop, you can add this code in Website > Pages > Website Tools > Custom CSS

@media screen and (min-width: 768px) {
  .header-display-desktop {
    flex-direction: row-reverse;
  }
  
  .header-burger {
    display: flex;
  }

  .header-nav, .header-actions {
    display: none;
  }

  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
}

Hope that helps.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.