Turn desktop-navigation into hamburger icon in 7.1?

Hi,

Anyone know how to turn the nav on the desktop version into a hamburger? I want mine in the top right corner.

Add to Home > Design > Custom CSS

@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;
}

Thanks so much. Worked great - just needed one more curly bracket right at the end. I know nothing about code. Cheers!

1 hour ago, mportch said:

Thanks so much. Worked great - just needed one more curly bracket right at the end. I know nothing about code. Cheers!

so did you solve? ✌️

Hamburger menu styling:

I have hamburger menu on the desktop, using 40% of the right side, so that our main image is still mostly visible, but when I click a submenu - such as Firm, the main menu moves to the right and is still visible as an almost ghost image. Is there a way to fix this? 

site: https://corn-apricot-zn88.squarespace.com/

PW BA47

On 6/10/2020 at 11:20 PM, deaton72 said:

Hamburger menu styling:

I have hamburger menu on the desktop, using 40% of the right side, so that our main image is still mostly visible, but when I click a submenu - such as Firm, the main menu moves to the right and is still visible as an almost ghost image. Is there a way to fix this? 

site: https://corn-apricot-zn88.squarespace.com/

PW BA47

 

Have you solved it yet?

If yes, can you provide the solution?

If not, can you take a screenshot?

@tuanphan is there a way to turn your navigation into a burger menu on scroll? so say scrolling past the first section and it will then fold up into the 3 line menu?

On 8/12/2021 at 3:41 AM, jenniferboddam said:

@tuanphan is there a way to turn your navigation into a burger menu on scroll? so say scrolling past the first section and it will then fold up into the 3 line menu?

Try this code

@media screen and (min-width:768px) {
 header#header.shrink {
 /* 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 there! Does anyone know how to do this with the Jaunt template? I do not have a site set up yet, this is for a client I'm working with who would like this done on their revamped site, and I just can't find an appropriate solution. If we could also include code to have the menu pop up on the left instead of the top, that would be amazing!

On 10/19/2021 at 10:29 PM, Phil84vaive said:

Hi there! Does anyone know how to do this with the Jaunt template? I do not have a site set up yet, this is for a client I'm working with who would like this done on their revamped site, and I just can't find an appropriate solution. If we could also include code to have the menu pop up on the left instead of the top, that would be amazing!

You mean this template? https://jaunt-demo.squarespace.com/

Add to Design > Custom CSS

header.Header.Header--top {
    display: none !important;
}
.Mobile.loaded {
    display: block !important;
}

On 4/2/2020 at 5:08 AM, tuanphan said:

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

This code worked for me however I want to center my logo and make it large without pushing the other content down. 

I would like to achieve this a wider x and rows for the nav items from this site https://martini71.squaremuse.com/# 

Closed 

Open

My site here on SQSP is https://www.tribeandsol.com but I am currently using a trial to design a new site which is https://ellipse-prism-hf54.squarespace.com 

pw moonmama

On 12/2/2021 at 10:44 AM, MoonMama said:

Hi, 

This code worked for me however I want to center my logo and make it large without pushing the other content down. 

 

I would like to achieve this a wider x and rows for the nav items from this site https://martini71.squaremuse.com/# 

Closed 

Open

 

My site here on SQSP is https://www.tribeandsol.com but I am currently using a trial to design a new site which is https://ellipse-prism-hf54.squarespace.com 

pw moonmama

It looks like you solved? I see logo center here

10 hours ago, tuanphan said:

It looks like you solved? I see logo center here

No this isn't solved. I had two request above, please let me know if you're able to help with this?

Hi... how do I move the navigation 'hamburger' to the left side of the header?

On 1/22/2022 at 9:56 PM, merman118 said:

Hi... how do I move the navigation 'hamburger' to the left side of the header?

I see it is in left side now

Hi the question above your post is not my question it is someone else (check the name).

My post is at the top and one of my questions didn't get answered. @tuanphan

On 4/2/2020 at 11:08 PM, tuanphan said:

Add to Home > Design > Custom CSS

@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;
}

 

This worked great for me!
Just two questions to follow up —

1. How can I hide the LOGIN next that shows on desktop, next to the Hamburger?
2. How can we add a red hover state to the navigation links in the mobile overlay?

Website: https://raspberry-seabass-y6wf.squarespace.com
Password: movebeyondwithava

Thanks!
Frances
 

#1. It looks like you solved with this CSS

.header-display-desktop .user-accounts-link {
    display: none;
}

#2. Add to Custom CSS

div.container.header-menu-nav-item a:hover {
    color: red !important;
}