Jump to content

How to remove CTA button from mobile overlay menu

Recommended Posts

  • Replies 6
  • Views 1.9k
  • Created
  • Last Reply
19 hours ago, rougediable said:

Site URL: https://vibraphone-fuchsia-r9kk.squarespace.com/

Hi,

I want to remove the CTA (book now) button from the overlay menu, but I want the button to be visible on desktop.

Thanks in advance for your help !

Add to Design > Custom CSS

/* Hide overlay cta button */
body.header--menu-open .header-menu-cta {
    display: none;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Hide overlay cta button */
body.header--menu-open .header-menu-cta {
    display: none;
}

 

Wow ! Thank you tuanphan, this worked perfectly !

I was also trying to have the CTA button displayed in the header of the mobile version of my site. It is displayed on Desktop, will not show on mobile.

I would like to have my logo on the left side of the header, the hamburger menu on the right side and the CTA button just left of the hamburger menu.

Is the CSS for that ?

Thanks !

Link to comment
On 5/1/2021 at 5:32 PM, rougediable said:

Wow ! Thank you tuanphan, this worked perfectly !

I was also trying to have the CTA button displayed in the header of the mobile version of my site. It is displayed on Desktop, will not show on mobile.

I would like to have my logo on the left side of the header, the hamburger menu on the right side and the CTA button just left of the hamburger menu.

Is the CSS for that ?

Thanks !

This require JavaScript code. Do/will you use Personal or Business or Commerce Plan?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 9/7/2021 at 1:16 PM, MusicHealthAI said:

@tuanphanis there a way to keep the CTA on mobile but remove it from the desktop overlay menu

 

www.verasounds.com I have two buttons in the header Login/Signup, but they also appear in the menu overlay. I'd like to remove them from the menu overlay but only for desktop.

 

Hope that makes sense

Add to Design > Custom CSS

/* remove cta from desktop overlay */
@media screen and (min-width:992px) {
.header-menu-cta {
    display: none !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.