Show Button on Mobile in Navigation (7.1)

By default, Squarespace hides the navigation header button on mobile, so you have to open the hamburger menu to see it. If you want to force show the header button on mobile so that it’s sitting next to the menu icon, you can use the code below.

Put the code below into Design -> Custom CSS.

Need more advanced customization on your website? Book a consultation with me to discuss the details!

@media screen and (max-width:767px) { 
  /* Displays Button */ 
  .header-actions { 
    display: block !important; 
  } 
  .header .header-actions-action--cta { 
    display: block; 
  } 
  
  /* Change Logo Width */ 
  .header-title-nav-wrapper { 
    flex: 50% !important; 
  } 
  .header-layout-branding-center .header-actions { 
    width: 100% !important; 
  } 
}

Customize

If you want to remove the hamburger on mobile so only the button remains, you can add the code below:

.header-burger { 
  display: none; 
}