Force Hamburger Menu on Desktop on a SINGLE Page only

Site URL: https://www.mountainprojectmt.com/train-anywhere-sign-up

I've been trying to figure out a way to make this page have a hamburger menu at all screen sizes but leave the rest of the pages alone. I can't quite figure it out. Anyone done this before?

On 10/27/2021 at 4:13 AM, toripintar said:

Site URL: https://www.mountainprojectmt.com/train-anywhere-sign-up

I've been trying to figure out a way to make this page have a hamburger menu at all screen sizes but leave the rest of the pages alone. I can't quite figure it out. Anyone done this before?

 

Add to Design > Custom CSS

/* Signup page */
body#collection-6011c4c2a22b9e18b7d995d5 {
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}}
}

@tuanphan thank you for sharing this - the code works great! I am wondering if there is a way to reduce the size of the gaps between the menu items?

https://franklywrite.squarespace.com/home

password - FWweb1

On 5/17/2022 at 12:29 PM, tillie said:

@tuanphan thank you for sharing this - the code works great! I am wondering if there is a way to reduce the size of the gaps between the menu items?

https://franklywrite.squarespace.com/home

password - FWweb1

 

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div.header-menu-nav-item a {
    margin: 5px;
}}

On 5/20/2022 at 6:41 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div.header-menu-nav-item a {
    margin: 5px;
}}

 

On 10/28/2021 at 11:11 PM, tuanphan said:

Add to Design > Custom CSS

/* Signup page */
body#collection-6011c4c2a22b9e18b7d995d5 {
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}}
}

 

Hi @tuanphan, I tried using this code to achieve the same on a single page, but it's not showing the navigation links in the hamburger menu. My header navigation is also partially showing. I used the same code as above but switched out my body#collection ID, which is body#collection-66588e7bd03541145758635a. 

Website: https://www.lucasano.com/test

On 5/30/2024 at 9:40 PM, LukeDesign said:

 

Hi @tuanphan, I tried using this code to achieve the same on a single page, but it's not showing the navigation links in the hamburger menu. My header navigation is also partially showing. I used the same code as above but switched out my body#collection ID, which is body#collection-66588e7bd03541145758635a. 

Website: https://www.lucasano.com/test

 

Use this code

@media screen and (min-width:992px) {
body#collection-66588e7bd03541145758635a {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
    .header-nav-wrapper {
        visibility: hidden;
    }
}}

2 hours ago, tuanphan said:

Use this code

@media screen and (min-width:992px) {
body#collection-66588e7bd03541145758635a {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
    .header-nav-wrapper {
        visibility: hidden;
    }
}}

That did not work 

On 6/1/2024 at 6:23 PM, LukeDesign said:

That did not work 

You can add & keep the code, we can check again easier

5 hours ago, tuanphan said:

You can add & keep the code, we can check again easier

The CSS you gave me is still there - https://www.lucasano.com/test

On 6/1/2024 at 4:16 PM, tuanphan said:

Use this code

@media screen and (min-width:992px) {
body#collection-66588e7bd03541145758635a {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
    .header-nav-wrapper {
        visibility: hidden;
    }
}}

I just tested again and it still shows fine. Maybe you added to wrong position in CSS code. You can send all code after you added the code?

4 hours ago, tuanphan said:

I just tested again and it still shows fine. Maybe you added to wrong position in CSS code. You can send all code after you added the code?

I've added the CSS in the Custom CSS under Website Tools. I also tried it in the Page's header injector, but are not working. The below image is what happens:

I have a lot of CSS in my Custom CSS - you want me to send all of it?

On 6/5/2024 at 7:52 PM, LukeDesign said:

I've added the CSS in the Custom CSS under Website Tools. I also tried it in the Page's header injector, but are not working. The below image is what happens:

I have a lot of CSS in my Custom CSS - you want me to send all of it?

You can add code to top of Custom CSS box. And do not add it to Page Header Code Injection