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

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

What is your site url? We can help easier

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

pw: forumhelp

Thank you!

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

Thank you!

How to I make sure they're still right aligned with margin of my mobile site? Currently they're indented from a right a little bit.

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

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 🙂

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

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

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

Add this CSS under

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

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!

Hi there, is there any possibility to address the above? I am also trying to move my 'add to cart' button on my product detail pages flush right and cannot figure it out.

currently:

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

pw: livingthedream

But I'm hoping to make it public with a new domain tomorrow morning.

Thank you!

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

On 11/8/2023 at 1:45 PM, charlineca said:

Hi, I am just going to reply to this existing thread. I also want to adjust my hamburger, but I mainly want to make it smaller and the lines closer together. I have attached two photos. The first is how mine looks, the second is how I would like to make it look. Can you help with this @tuanphan? So far I only managed to adjust the stroke width and width of the hamburger, but not make it narrower height-wise. Thank you!

I just solved a case today, but I don't remember the code & site url, if you share link to your site, I can check again & give you code