Jump to content

Show header CTA button in mobile with a shopping cart

Recommended Posts

Site URL: https://xdframes.com/

I've used this code from the amazing Tuanphan who always has the answers. But my header also has a cart so my cart and CTA buttons stack. It also leaves no padding on the right before the hamburger. Is there any CSS code to get them side by side and get some padding on the right for the hamburger? The Squarespace mobile preview shows the padding, but I don't get padding on my mobile device.

For now I have removed the code until I sort it out.

@media screen and (max-width:767px) {

.header-actions {
    display: block !important;
    flex: 50%;
.header .header-actions-action--cta {
    display: block;

.header-title-nav-wrapper {
    flex: 20% !important;

Screen Shot 2021-11-06 at 2.06.23 PM.png

Edited by XDFrames
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.