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 9
  • Created
  • Last Reply

Top Posters For This Question

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

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.

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.

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.

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.

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