Full nav on homepage but hamburger on rest (7.1)

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

I've used a custom CSS to force hamburger navigation on the desktop version in 7.1 but wondered whether it's possible to keep full nav on the homepage with hamburger on the rest of site?

I'm total noob to Squarespace and CSS so please keep it simple!

Which code did you use? Can you post here & we can tweak it easier.

Hi tuanphan - sorry for the slow response, I thought I'd get a notification to a reply but didn't see one.

The code I used was:

@media screen and (max-width: 5000px) {

  /* Display burger icon at all widths and align right */ 

  .header .header-burger {

    display: flex;

    order: 2 !important;

  }

  /* Make burger menu visible at all widths */ 

  .header--menu-open .header-menu {

    opacity: 1;

    visibility: visible;

  }

  /* Center logo in mobile device */

  .header-title {

    text-align: left !important;

  }

  /* Hide primary navigation menu */

  .header .header-title-nav-wrapper .header-nav {

    display: none;

  }

}

.header-menu-nav-item {

  line-height: 0.5em

}

@media screen and (min-width: 768px) {

  .header-menu-nav-item a {

    font-size: 3vmin;

  }

}

Try this new code

body:not(.homepage) {
@media screen and (max-width: 5000px) {

  /* Display burger icon at all widths and align right */ 

  .header .header-burger {

    display: flex;

    order: 2 !important;

  }

  /* Make burger menu visible at all widths */ 

  .header--menu-open .header-menu {

    opacity: 1;

    visibility: visible;

  }

  /* Center logo in mobile device */

  .header-title {

    text-align: left !important;

  }

  /* Hide primary navigation menu */

  .header .header-title-nav-wrapper .header-nav {

    display: none;

  }

}

.header-menu-nav-item {

  line-height: 0.5em

}

@media screen and (min-width: 768px) {

  .header-menu-nav-item a {

    font-size: 3vmin;

  }

}}