Jump to content

Show Mobile Hamburger Menu on Desktop

Recommended Posts

Hi, I currently have used the following code to force the mobile navigation menu to show on desktop:

.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 50%; 
margin-left: 55%;
box-shadow: -5px 5px 15px #000}

/* Desktop overlay */
@media screen and (min-width:992px) {
div.container.header-menu-nav-item a {
    margin-top: 0.9vw;
    margin-bottom: 0.5vw;
a.theme-btn--primary.btn {
    font-size: 1.2rem;
    padding-top: 5px;
    padding-bottom: 5px;

But I have been having some issues with it that I would like to fix:

- Whenever I click the hamburger menu, the logo shows through the menu. 

-On mobile version now, when I click the hamburger menu and close it, for a split second the original mobile navigation shows at full screen.

I have attached screenshots as well.

Screenshot 2023-04-27 135323m.png

Screenshot 2023-04-27 135513.png

Link to comment

I'm not sure I can fix this for you.

Honestly for features like this I use a well-designed plugin like this one:


Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.