How to Add Hamburger to Desktop Menu Using Custom CSS Squarespace (7.1)

Art of CSS

12 Jun

Hello Squarespace Fellas!!

Welcome back to another Squarespace blog 🤓

Today’s Blog will discuss adding hamburger to the desktop menu using custom CSS in your Squarespace. Excited?? so let’s get started!!😀

Adding Hamburger to Desktop Menu in Squarespace

In Squarespace, the default behavior is to display the full navigation menu on desktop devices, without a hamburger menu. The hamburger menu is typically reserved for mobile devices to provide a compact and easily accessible navigation menu. However, if you want to implement a hamburger menu on the desktop version of your Squarespace website, you can do so using custom code.

Steps to Add Custom CSS:

Step 1: Log in

Step 2: Design > Custom CSS

Go to Design and then open up the custom CSS portion.

Step 3: Add Custom CSS for Hamburger

Paste the below code to your website's custom CSS portion. This code will add a hamburger on the desktop menu in Squarespace.

  
    .header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-burger {
    order: 2 !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
    height: 3px !important;
    transform: translateY(-10px);
}

.burger-inner.header-menu-icon-doubleLineHamburger .patty {
    background-color: #000 !important;
    height: 3px !important;
    transform: unset !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
    transform: translateY(10px);
    height: 3px !important;
}

.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title {
    text-align: unset;
}

.header-burger {
    display: flex;
}

.header-nav {
    display: none !important;
}

.header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
}

  