Jump to content

Add Hamburger to desktop but keep main nav

Recommended Posts

Hi there,

I have had a client request a menu navigation like this for their desktop version - effectively replicating their navigation bar in a burger menu on the top left.

It looks like the burger menu includes a few additional items in it too. There are plenty of tutorials on switching out the top navigation entirely with a burger menu like the mobile version but not combining both.

One solution I found here - https://ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/ - is as close as I can find but this would mean replicating all the pages so there is a copy in the burger menu as well as the main nav.

Has anyone found a way to do this? Any information would be greatly appreciated!

Link to comment

Use Ryan's code, but instead of replicating the pages just add links in that direct to the pages you've already built. This is probably the most efficient workaround!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Thanks so much Sam, I don't know why I didn't think of that!

I have implemented the code and it's looking great on desktop, however I have two problems:

1. The code to hide the burger menu items on mobile doesn't seem to have worked properly, the burger menu items are still appearing - I used this code piece:

/* This will hide the desktop burger on mobile devices*/
@media (max-width: 767px) {
  a[href='/burger'] {
    display: none;
  }
}

2. I need to try and move the burger menu icon to the top left on desktop to the left of the logo (like their example here https://www.lw.com/en) - any code / suggestions on how to do this?

Cheers!

Link to comment

No problem! Could you send me the link to your site with password please? I can write the code for you then.

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Thanks Sam, you're a life saver!

I dropped in some code to move the top navigation more central too but it doesn't look like it's applied to the whole of it, the code I used is:

a.header-nav-folder-title {
    visibility: hidden;
}
a.header-nav-folder-title:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    visibility: visible;
    font-size: 30px;
}

The link is: https://www.adambenedict.co.uk/ 

The site is currently live as a placeholder so no password needed.

Link to comment
On 3/23/2023 at 5:01 PM, Hux221 said:

Thanks Sam, you're a life saver!

I dropped in some code to move the top navigation more central too but it doesn't look like it's applied to the whole of it, the code I used is:

a.header-nav-folder-title {
    visibility: hidden;
}
a.header-nav-folder-title:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    visibility: visible;
    font-size: 30px;
}

The link is: https://www.adambenedict.co.uk/ 

The site is currently live as a placeholder so no password needed.

Do you still need help? Currently I don't see any menu items on header

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
  • 2 weeks later...
On 4/6/2023 at 3:17 PM, Hux221 said:

Good morning! Apologies for the delay, I had to take the navigation out briefly - the site is now password protected here is the URL and PW:

https://adambenedict.co.uk/

AB123

Thank you in advance for the help!

You mean keep main nav in this position?

image.thumb.png.241df16a82f3cacb93f86955ccb6080d.png

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

Hi Tuanphan,

The navigation can stay right aligned like it is, but the vertical alignment is out - I have dropped a screenshot with a horizontal rule - it looks like the logo and button are on a level but the 'capabilities' and burger menu are too high?

I think the main issue is the burger menu appearing in the mobile version and messing with the button and other formatting, I need to get the additional burger menu hidden on mobile and hopefully this should fix the overlapping elements then too (screenshot attached of the problem).

Cheers,

Rob

Screenshot 2023-04-12 122927.png

Screenshot 2023-04-12 123256.png

Link to comment
On 4/17/2023 at 4:35 PM, Hux221 said:

Thanks tuanphan! The alignment looks great now.

Do you have any ideas on how I can fix the mobile navigation as well?

Add to Settings > Advanced > Code Injection > Footer

<!-- Fix Mobile menu button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-menu-cta').appendTo('.header-menu-nav-folder-content');
    $('.header-menu-actions').insertAfter('.header-menu-cta');
})
</script>

image.png.0bf0b7f453d63b13781f00b693fe9344.png

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

Many thanks tuanphan - you're a life saver!

That has fixed the mobile navigation now however I've noticed if I try and hover over the burger in the desktop navigation now it appears blank? (see attached)

Thanks again so much for all your help on this!

 

 

Screenshot 2023-04-19 135448.png

Link to comment

Hello - I am trying to put a Hamburger menu icon on desktop using this and when I put the coding into my footer nothing happens at all? Any help would be great! Why are we putting it in the footer not the header? I have tried both but nothing seems to change on either? 
Thank You 

Link to comment
On 4/19/2023 at 7:58 PM, Hux221 said:

Many thanks tuanphan - you're a life saver!

That has fixed the mobile navigation now however I've noticed if I try and hover over the burger in the desktop navigation now it appears blank? (see attached)

Thanks again so much for all your help on this!

 

 

Screenshot 2023-04-19 135448.png

Try this new code

<!-- Fix Mobile menu button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
    if (jQuery(window).width() < 767) {
  $('.header-menu-cta').appendTo('.header-menu-nav-folder-content');
    $('.header-menu-actions').insertAfter('.header-menu-cta');
      }
})
</script>

 

On 4/20/2023 at 6:41 PM, HarrietFrost said:

Hi @Hux221I have followed steps here but when I add the coding mentioned in that link nothing seems to happen unlike the before and after image shown as an example...

What is your site url?

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.