Hamburger help!

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 

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

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:

Paul you are a legend! I wasn't sure why that other code was even there- I certainly didn't do it! Anyway I got rid of it, re-entered your code and now the menu works just as it should. Thanks so very much!

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!