Jump to content

Hamburger help!

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.cornishseaberry.co.uk

Hello,

 

I'm running the fosters template and I've tweaked the mobile breakpoint so I always get the hamburger menu- even when viewed on desktop. BUT... when you click on the hamburger the menu options drop-down completely cover the whole page-width. Is there a way of writing code to stop this menu going full width on the desktop, but it remains functional on mobile devices? I'm a complete code newbie so explanations will need to be basic! 

 

Thanks very much 

 

Link to comment
  • Solution
21 hours ago, Pascoe said:

I've tweaked the mobile breakpoint so I always get the hamburger menu- even when viewed on desktop. BUT... when you click on the hamburger the menu options drop-down completely cover the whole page-width.

Yes. You can add some CSS to Design > Custom CSS to set a maximum width for the mobile overlay. For example:

.Mobile-overlay {
  max-width: 450px;  
}

Let me know how you get on.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
1 hour ago, paul2009 said:

Yes. You can add some CSS to Design > Custom CSS to set a maximum width for the mobile overlay. For example:

.Mobile-overlay {
  max-width: 450px;  
}

Let me know how you get on.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks Paul, I cut and paste that code and put it into Design> custom CSS as you suggested. I put it at the very top in line one but it made no difference at all - even when I changed the max-width px. What did I do wrong??

Link to comment

You have some other errors in your CSS that need to be fixed. Until these have been resolved (or removed) it's difficult to say what the issue is. For example color: #hsl(230,100%,50%) isn't valid.

However, when you've fixed the errors, this is what you should see:

1281288999_Screenshot2022-03-05at21_09_47.thumb.png.48888c4dd8ce2ca4d14ce2fef9600686.png

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Can I ask for one more code favour Paul? Is there a way of writing code so that your selection in the drop down menu is highlighted when you move the mouse cursor over it? e.g. if I chose 'contact us' this would appear darker than the other menu options when my mouse hovers over it. Is that doable? Or is that massively complex?

Would really appreciate your help on that! 

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.