Jump to content

Hamburger on Desktop with Full Screen Navigation \ Custom Color

Recommended Posts

Hey all, 

I am trying to replicate what this website (hrdwrker.com) has a 1) hamburger on the desktop, 2) leaves out the button on the header, 3) It does a full screen drop down. 

I have found the following code address 1 &2  but there are issues I am trying to fix

A) In mobile, I see the dropdown nav "menu" first that need I click on to see pages. I just want it to show the pages immediately

B) I would like the menu to be full screen in desktop

C) I would like the full screen menu to be a custom grey (#D1CCC5) in desktop and mobile

Any body have thoughts?

I found other coding examples but they don't work on my site. My site it goodiscontagious.com

 

a.header-nav-folder-title {
    visibility: hidden;
}
a.header-nav-folder-title:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    visibility: visible;
    font-size: 50px;
    color: white;
}

 

Screenshot 2024-02-05 at 9.39.15 AM.png

Screenshot 2024-02-05 at 9.39.22 AM.png

Screenshot 2024-02-05 at 9.50.08 AM.png

Screenshot 2024-02-05 at 9.50.17 AM.png

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Use this code

@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.