Jump to content

Hamburger menu problems + Disappearing cart

Recommended Posts

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;



/* 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! 


Screenshot 2024-01-05 at 08.34.22.png

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Don't remove any code in your current code. Use this CSS code to reduce menu width

div.header-menu {
    right: unset;
    width: 30%;
    overflow: hidden;

nav.header-menu-nav-list>div:not(:first-child):not(.header-menu-nav-folder--active) {
    visibility: hidden;


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

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.