Jump to content

Hide button header on desktop using css

Go to solution Solved by creedon,

Recommended Posts

I'm attempting to customize my site heading and finding some roadblocks.

Essentially, I'd like the desktop and mobile site heading to be different. On desktop I'd like to have text that says the business's address and phone number. On mobile, I'd like a button that people can click on to call automatically. I've successfully added both these elements, but haven't been able to customize the view so they aren't competing on desktop view.

I'm having an issue with disabling the button from displaying on desktop screens. Is there code I can use to hide the button on displaying on desktop, so that it only displays on mobile and doesn't obstruct the CSS text addition?




Link to comment
  • 2 weeks later...
  • Solution

Add the following to Design > Custom CSS.

.header-actions-action.header-actions-action--cta {

  display : none;

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.