Button element not appearing on mobile

Site URL: https://bike4breakthroughs.squarespace.com/

Password is: B4B

Very simple site overall

I added custom css to add my button to look and fit right - which it does. But it doesn't appear on mobile. See screenshots below. Top right button is what i'm referring to...

On mobile the menu bar appears - but i don't have a menuy so i'm confused why that's there and not the donate button? 

current code i have: 

.header-actions-action .btn {
  background: url(https://static1.squarespace.com/static/61e1dbd561cee81e68f38043/t/61e75c3aa5a88e2e1c70b6b7/1642552378980/BLOODDONATE.png); 
 background-size: cover;
 height: 60px;
 width: 50px;
}

Hi there!

By default, Squarespace removes the visible button on mobile devices and instead, it is placed in the mobile hamburger menu at the bottom.

Here is a blog post that should work for 7.1 templates: https://blog.tawfiq.me/how-to-add-a-button-to-mobile-header-between-logo-and-menu-icon-squarespace/

If you are looking for something a little more robust that lets you add up to 3 visible menu items on mobile devices, I have a plugin available on my website that does just that!

(this is not an affiliate link - I created the plugin myself)

Hi Caroline,

That blog appears to be off line. Any chance you know the code to add to make the header button show up on mobile? 

Many thanks!

On 11/1/2022 at 9:54 PM, RPCreative said:

Hi Caroline,

That blog appears to be off line. Any chance you know the code to add to make the header button show up on mobile? 

Many thanks!

This depends on your header layout. If you share link to your site, we can check & give code to move button outside burger menu.