Jump to content

👾 Edit burger size on desktop ? (Novo)

Recommended Posts

Hi there, i hope everyone are doing well.

I was just wondering if that is possible to have a custom burger (size & spacing between bun) on desktop like that (image linked). 
I dont want to touch to the mobile burger, which is fine.

I found a way to have the burger on desktop but it switch the menu with the mobile burger, too small for desktop.

Thanks for the help

Capture d’écran 2021-03-18 à 19.37.27.png

Link to comment
  • Replies 2
  • Views 426
  • Created
  • Last Reply

I try this. The result was fine in the css editor but once i leave it, it does not work.

 

/* Hide header button */
.header-nav-list {
    display: none;
}
/* show burger */
.header-burger {
	display: flex;}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;}

/* Space between top-bottom buns */
.burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
transform: translatey(-0.8vw);}

.burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
 transform: translatey(0.8vw);}

/* Lines Inactive burger */
.burger-box {
position: relative;
display: flex;
align-items: center;
justify-content: right;
width: 5vw!important;
}

/* Burger active rotation top */
.burger--active .burger-inner .top-bun {
transform: translatex(3.5px) rotate(224deg);
width: 5vw!important;
}
/* Burger active rotation bottom */
.burger--active .burger-inner .bottom-bun {
transform: translatex(3.5px) rotate(135deg);
width:5vw!important;
}

 

Link to comment
  • Pims changed the title to 👾 Edit burger size on desktop ? (Novo)

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.