Jump to content

Customize mobile hamburger and shopping cart (size, weight, etc)

Recommended Posts

I'm looking for code to make a few changes to my mobile hamburger and shopping cart: 

  1. How do I make them smaller?
  2. Once they're smaller, how to I make sure they're still right aligned with margin of my mobile site?
  3. How do I add a stroke or make them a little bolder?
  4. How do I make the hamburger lines shorter?

Bonus question!

  1. If I create my own shopping cart icon, how do I use that instead of squarespace's icon on both mobile and desktop?

I've tried this code from another forum answer to make the burger smaller, and it didn't work:

.burger-box {
    width: 15px;
}
Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...

Add to Design > Custom CSS

/* cart */
.header .header-actions-action--cart .icon {
    width: 15px;
    stroke-width: 3;
}
/* burger */
.burger-inner>div {
    width: 50% !important;
    height: 4px !Important;
}

 

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
  • 2 weeks later...
On 2/11/2022 at 10:26 PM, crisisandcreativity said:

https://elk-drum-5kzr.squarespace.com/

pw: forumhelp

Thank you!

Add this CSS under

.burger-inner>div {
    left: unset !important;
    right: 0 !important;
}

 

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

Thank you! Can you tell me how to right-align the burger and shopping cart with the margin of my mobile page? Right now it kind of floats toward the right instead of being anchored to the margin.

I have another question. On the desktop version of my page, I changed the slashes in between the breadcrumbs to dotted slashes. I'd like to do that with the nav toward the top of my mobile page (they're not breadcrumbs though, it's the sidebar nav in the desktop version). I'll attach respective screenshots. 

 

https://elk-drum-5kzr.squarespace.com/

pw: forumhelp

Thanks 🙂

Screen Shot 2022-03-01 at 8.22.26 PM.png

Screen Shot 2022-03-01 at 8.21.40 PM.png

Link to comment

Add to Design > Custom CSS

.burger-inner>div {
    text-align: right !important;
    right: 0 !important;
    left: unset !important;
}
.burger-inner>div {
    text-align: right !important;
    right: 0 !important;
    left: unset !important;
}

span.breadcrumb-separator {
    font-size: 0;
    opacity: 1 !important;
    position: relative;
}
span.breadcrumb-separator:before {
    content: "";
    background-color: black;
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 

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

Thank you, it's so close!! I tried tweaking it a little to go from bullets in between the items to the dotted slash symbol, but now I can't get rid of the solid upright slashes. My trial and error almost worked.. can you finish the job for me? Here is what I did, and how it looks:

 /*Mobile top nav/breadcrumb custom separators*/
span.breadcrumb-separator {
     content: "⋰" !important;
    opacity: 1 !important;
    position: relative;
}
span.breadcrumb-separator:before {
    content: "⋰" !important;
}

Screen Shot 2022-03-03 at 9.41.07 AM.png

Link to comment
On 3/3/2022 at 9:46 PM, crisisandcreativity said:

Thank you, it's so close!! I tried tweaking it a little to go from bullets in between the items to the dotted slash symbol, but now I can't get rid of the solid upright slashes. My trial and error almost worked.. can you finish the job for me? Here is what I did, and how it looks:

 /*Mobile top nav/breadcrumb custom separators*/
span.breadcrumb-separator {
     content: "⋰" !important;
    opacity: 1 !important;
    position: relative;
}
span.breadcrumb-separator:before {
    content: "⋰" !important;
}

Screen Shot 2022-03-03 at 9.41.07 AM.png

Add this CSS under

span.breadcrumb-separator {
    visibility: hidden;
}
span.breadcrumb-separator:before {
    visibility: visible;
}

 

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

Thank you, that worked!

About what we did to move my mobile shopping cart and hamburger to right-align it, it seems that the right margin is still not even with the left on mobile, it seems to be a few pixels off (pictured)

And that code affected the desktop version, so there is a gap in the nav and shopping cart (pictured)

What I'm hoping for is all the right side nav and icons to be right-aligned on both mobile and desktop.

Any help is much appreciated!

Screen Shot 2022-03-10 at 9.17.17 AM.png

Screen Shot 2022-03-10 at 9.06.47 AM.png

Link to comment

Try adding to Design > Custom CSS

/* Mobile cart icon right align */
@media screen and (max-width:767px) {
.header-announcement-bar-wrapper {
    padding-right: 2vw !important;
}
}

 

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.