Jump to content

Hamburger Menu Nav across all devices (version 7.1)

Go to solution Solved by inside_the_square,

Recommended Posts

6 hours ago, butterycash said:

certainly

pass: ackbar

https://www.icantbelieveitsnotbuttery.com/

also is there a way to limit the width of the menu after it appears to only 50% of the page?

thanks
JC

Add to Home > Design > Custom CSS

.header--menu-open .burger-box {
    background: none;
}
.header--menu-open .burger-box div {
    display: block;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
4 hours ago, bonniergcuk said:

sorry, thank you

dolphinbottles.co.uk password: dolphin

 

apologies!

Add to Home > Design > Custom CSS

.header-display-desktop .header-actions.header-actions--right {
    visibility: visible !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 hours ago, Georgiaallen23 said:

Hi. I was wondering if anyone knew how to get the hamburger menu on the left hand side, my logo in the middle, and the social icons on the right of the header? Thanks 

Can you share site url? We can help easier.

 

On 10/24/2020 at 1:43 AM, hanna38 said:

@tuanphan Thank you for your help! The site name at the moment is https://irene-pichler.squarespace.com/config/ and the password Homepage2020. Thanks so much!

Can you describe in detail again? Thank you

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/25/2020 at 4:28 PM, tuanphan said:

Can you share site url? We can help easier.

The site name at the moment is https://irene-pichler.squarespace.com/config/ and the password Homepage2020.

Can you describe in detail again? Thank you

I want the lines of the hamburger menu to be longer. I managed with the css above to make them fatter, but I don't know who to make them longer (so in the horizontal direction bigger). Is there any code to manage that? Thank you for your help!

 

Link to comment
  • 3 weeks later...
15 hours ago, NikieL said:

Hi! I was wondering if someone could help. I have used the code for the burger menu, but changing between pages the old 'hidden' menu still flashed up... Also the code for spacing doesn't seem to work for me, its so far between them now! Thank you !

Can you share site url? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Its a little bit better now but the font seems huge and very spaced out between!

https://puma-tetra-6bfs.squarespace.com

Password: Cheyne2020

I was also trying to make two project images unclickable with this code but can't make it work, can you help? Thank you! 

a.project[href="/marble-arch/"] {
    pointer-events: none;
}
a.project[href="/knightsbridge/"] {
    pointer-events: none;
}

Link to comment
  • 2 weeks later...
On 11/20/2020 at 6:49 PM, NikieL said:

Its a little bit better now but the font seems huge and very spaced out between!

https://puma-tetra-6bfs.squarespace.com

Password: Cheyne2020

I was also trying to make two project images unclickable with this code but can't make it work, can you help? Thank you! 

a.project[href="/marble-arch/"] {
    pointer-events: none;
}
a.project[href="/knightsbridge/"] {
    pointer-events: none;
}

To adjust size - space, add to Home > Design > Custom CSS

div.header-menu-nav-item a {
    font-size: 20px !important;
    padding: 20px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 weeks later...

I have used the code to implement the hamburger menu, everything is working even with the social links and cart showing too.

The problem I have ran in to is that the logo is not centered, with it being placed just slightly right of where it should be 1538254169_Screenshot2021-01-02at17_38_52.thumb.png.9449cfb659a499d7a4dcfaff27bafac2.png

Can anyone help with this?

Link to comment

Hi guys, I hate to add on to the questions but does anyone know how to get the burger menu with three lines and the actual word "menu" to the side or on top? Or can I just custom create a vector and upload and replace link from previous post about three lines? It's the LAST thing I need to finally publish the site 😞

Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix?

Thank you

Link to comment
On 1/3/2021 at 12:39 AM, saltclo said:

I have used the code to implement the hamburger menu, everything is working even with the social links and cart showing too.

The problem I have ran in to is that the logo is not centered, with it being placed just slightly right of where it should be 1538254169_Screenshot2021-01-02at17_38_52.thumb.png.9449cfb659a499d7a4dcfaff27bafac2.png

Can anyone help with this?

Can you share site url? We can help easier.

On 1/5/2021 at 7:44 PM, ehernandezkpg said:

Hi guys, I hate to add on to the questions but does anyone know how to get the burger menu with three lines and the actual word "menu" to the side or on top? Or can I just custom create a vector and upload and replace link from previous post about three lines? It's the LAST thing I need to finally publish the site 😞

Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix?

Thank you

Can you share url? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/7/2021 at 3:25 AM, saltclo said:

Try adding to Home > Design > Custom CSS

.burger-box:after {
    content: "menu";
    width: 60px;
    height: 30px;
    display: block;
    color: black;
    font-size: 20px;
    visibility: visible;
}
.burger-box div {
    display: none;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.