Jump to content

Button element not appearing on mobile

Recommended Posts

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;
}

 

Screen Shot 2022-02-10 at 1.56.38 PM.png

Screen Shot 2022-02-10 at 1.57.46 PM.png

Edited by JGeringer9
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

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)

Edited by Caroline_Smith
Link to comment
  • 8 months later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.