Move hamburger icon? 7.1

Site URL: https://blackbird-trout-b2n3.squarespace.com/

Hi,

How would I move this hamburger over to the right next to the cart?

password: password

Currently have this code in CSS:

.header-burger {
  display: flex;
}

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.header-burger {
    order: 2;
}
}

Hi, still doesn't work. It's not a media size issue. If you add the cart it pushes the hamburger icon next to the logo.

Add to Home > Design > Custom CSS

.header-burger {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}

Great!!

Is there a way of putting some space between them? And making the cart a bit smaller?

@tuanphan

Hi,

Is it possible to make the layout look like this? (not the red guidelines)...

(Swap position of cart and burger, reduce cart size, space between them, 3 lines in burger)

Mobile version:

Hi

Follow to the code @tuanphan
Use this code in Design -> Custom CSS

.header-burger {
    order: 3 !important;
}
.header-actions.header-actions--right {
    order: 2 !important;
}

.header-actions--right .showOnDesktop {
    margin-right: 20px;
}


.header-display-mobile .showOnMobile{margin-right: -40px !important;}

Please use the like button if it helps you!

Best,
Leopold

@IXStudio

Thanks!!!

Do you know how to make the cart smaller and align the burger exactly with the image margin?

You're welcome!

Use this code in Design -> Custom CSS

button.header-burger-btn.burger {
    padding: 0;
}

.header .header-actions-action--cart .icon {
    height: 22px;
    width: 22px;
}

Please use the like button if it helps you!

Best,
Leopold

Fantastic - thank you!!!!

@IXStudio

Oh, sorry, any way of getting the cart number smaller too?

Use this code in Design -> Custom CSS

.Cart-inner .icon-cart-quantity {
    font-size: 8px !important; /* change to anythings you want */
}

Please use the like button if it helps you!

Best,
Leopold

Fantastic thanks so much!

I almost got it right correcting the mobile version - but still have problems moving the cart number...

//HAMBURGER ALIGNMENT - MOBILE//
@media screen and (max-width:767px) {
.header-announcement-bar-wrapper {
    padding-right: 4vw !important;
}
.header .header-actions-action--cart .icon {
    height: 20px;
    width: 20px;
  padding-left: 5vw !important;
}
  .Cart-inner .icon-cart-quantity {
    font-size: 8px !important;
  padding-left: 5vw !important;
  }}

Use this code in Design -> Custom CSS

@media screen and (max-width:460px) {
.Cart-inner .icon-cart-quantity {
    margin-right: -15px !important;
}
}

Sorry you need web customization service to solve like these design-code bugs. If like to continue please contact me via DM or Skype: LeopoldJobs.

Best,
Leopold

Genius thanks!!!

Hi,

I normally have the social icons ONLY showing in the navigation dropdown menu.

How do I remove them from the top?

It's ok - I guessed the code and removed them:

  .header-actions-action--social {
    display: none !important;
  }

Hi there!  I am on 7.1 and used the code below to remove the hamburger menu from my mobile site - however, the cart is still in the same place.

.burger-box {
    display: none;

Is there code I can use to push the cart over to the right top corner? Thank you!

On 4/6/2022 at 7:11 AM, kelseydobs said:

Hi there!  I am on 7.1 and used the code below to remove the hamburger menu from my mobile site - however, the cart is still in the same place.

.burger-box {
    display: none;

Is there code I can use to push the cart over to the right top corner? Thank you!

What is your site url? We can check easier