Hello everyone,
I'm trying to add code to create a hamburger menu on a website. I am now experiencing two problems and would love for some help. Website: https://livelo.com/
My goal:
To have a Hamburger menu that is on half of the page, so not full screen when you click on it. And to have the shopping-cart visible in the header at all times.
(See photo attached for problems)
Problem 1:
When creating the hamburger menu, the under categories of the links are becoming visible on the screen. This does not happen when I have it coded for full screen, but only when I try to shorten it.
Problem 2:
The shopping-cart has disappeared. And I can't figure out how to get it back. In the first part of the code I have:
.header-nav, .header-actions {
display: none;
}
Which you can change to visible, but then you see all of the category links as well. And I only want the cart!
Code used at the moment (full of flaws):
.header-nav, .header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
div.header-menu-nav-item:hover div {
color: #45db84;
}
// CUSTOM HAMBURGER
/* Non-active burger */
.burger-inner:after {
content: "";
background-image: url(https://images.squarespace-cdn.com/content/6448dc6e9a1ab06f2f0b09b2/c1ab87d0-513a-4895-bd70-db65144393a3/meny.png?content-type=image%2Fpng);
background-size: 100px;
background-repeat: no-repeat;
background-position: right;
background-color: transparent !important;
display: block;
width: 100px;
height: 60px;
}
.burger-inner>div {
display: none !important;
}
/* Burger when active */
body.header--menu-open .burger-inner:after {
background-image: url(https://images.squarespace-cdn.com/content/6448dc6e9a1ab06f2f0b09b2/c86f223d-ab91-4b51-8bd5-fe5d5bf9a9e5/Screenshot+2024-01-09+at+10.57.19.png?content-type=image%2Fpng) !important;
}
Appreciate all and any help!
Cheers
