Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Turn desktop-navigation into hamburger icon in 7.1?


mportch

Question

  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

17 answers to this question

Recommended Posts

  • 2

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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? ✌️

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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!

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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 493391332_ScreenShot2021-12-01at5_15_41PM.thumb.png.4b3792aab6f8fa2183087062786c6278.png

Open782596354_ScreenShot2021-12-01at5_15_32PM.thumb.png.5f11cb93a8db7593fdd98169bbbde233.png

 

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

Edited by MoonMama
Link to comment
  • 0
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 493391332_ScreenShot2021-12-01at5_15_41PM.thumb.png.4b3792aab6f8fa2183087062786c6278.png

Open782596354_ScreenShot2021-12-01at5_15_32PM.thumb.png.5f11cb93a8db7593fdd98169bbbde233.png

 

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

image.thumb.png.3240baa490565af2c3e27e6dfc9318ae.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

image.thumb.png.8cb0477dd4a2aad2c9e36ca8d85d26df.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
 

Screen Shot 2022-02-01 at 2.25.05 PM.png

Screen Shot 2022-02-02 at 1.10.15 PM.png

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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