Pims Posted March 18, 2021 Share Posted March 18, 2021 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 Link to comment
Pims Posted March 21, 2021 Author Share Posted March 21, 2021 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
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 Hi. Can you share site url? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.