Menu (Hamburger) Button for Desktop

I was wondering if it could be possible to have a menu (hamburger) button for my site navigation on desktop? I know it's not standard for desktop view, but I feel like it could be done since the design is already there for mobile. I would like to have the menu icon in left corner, three lines and with the word Menu. When clicked, the menu section fill 1/3 (left side) of the page, with the text aligned left. Thanks in advanced!

Hi,

This is possible. What is your site url? We can help easier

URL: toddagriscience.com

On 7/23/2023 at 6:58 AM, vincenttodd said:

URL: toddagriscience.com

 

 

Left Burger Menu - Middle Logo - Right Cart text, is that right?

Yeah.

That worked, but the page title (logo area) shifted right (see attached). And could I add the word "Menu" next to the menu?

Another issue I discovered: (ignore cart)

If it would help, you could set where you can see page behind (the 2/3 section of the menu) to Hex: 19110B. IDK

On 7/26/2023 at 5:34 AM, vincenttodd said:

That worked, but the page title (logo area) shifted right (see attached). And could I add the word "Menu" next to the menu?

Use this code

a#site-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.header-menu-nav-folder[data-folder="root"]~div:not(.header-menu-nav-folder--active) {
    opacity: 0;
}

That did it.

I've found a couple small issues I was wondering if you could help with:

1) I tried changing the navigation margins with the CSS below but it only changed the first nav section. i.g. https://www.toddagriscience.com navigation > "shop by collection" (second nav section).

1. }
2. .header-menu-nav-folder[data-folder="root"]>div>div {
3.     margin-bottom: 22px !important;
4. }

2) Can I change the nav left and right padding?

3) Can I align the ">" after the word all the way to the right padding?

Thanks!

#1. Use this CSS

div.container.header-menu-nav-item {
    margin-bottom: 30px !important;
}

#2. These padding?

#3. Move all > touch red line?

@tuanphan Hi, I've added the hamburger to my desktop version but now my logo is on the left side. I want the hamburger on the left, logo in the middle, and book now/social icon on the right. Any idea what code I need to add or edit? Website > https://lemon-flower-srp5.squarespace.com/home

Current Code:

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */
  .header .header-burger {
    display: flex;
    order: 2 !important;
  }
  /* Make burger menu visible at all widths */
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}.header-menu-nav-item {
  line-height: 3em
}
@media screen and (min-width: 900px) {
  .header-menu-nav-item a {
    font-size: 10vmin;
  }
}

On 8/11/2023 at 6:25 AM, tuanphan said:

#1. Use this CSS

div.container.header-menu-nav-item {
    margin-bottom: 30px !important;
}

#2. These padding?

#3. Move all > touch red line?

Yes

On 8/12/2023 at 5:07 AM, savvysocialite said:

@tuanphan Hi, I've added the hamburger to my desktop version but now my logo is on the left side. I want the hamburger on the left, logo in the middle, and book now/social icon on the right. Any idea what code I need to add or edit? Website > https://lemon-flower-srp5.squarespace.com/home

Current Code:

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */
  .header .header-burger {
    display: flex;
    order: 2 !important;
  }
  /* Make burger menu visible at all widths */
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}.header-menu-nav-item {
  line-height: 3em
}
@media screen and (min-width: 900px) {
  .header-menu-nav-item a {
    font-size: 10vmin;
  }
}

Your site is private. Can you setup an access password? We can access easier

On 8/10/2023 at 7:02 AM, vincenttodd said:

I've found a couple small issues I was wondering if you could help with:

1) I tried changing the navigation margins with the CSS below but it only changed the first nav section. i.g. https://www.toddagriscience.com navigation > "shop by collection" (second nav section).

1. }
2. .header-menu-nav-folder[data-folder="root"]>div>div {
3.     margin-bottom: 22px !important;
4. }

2) Can I change the nav left and right padding?

3) Can I align the ">" after the word all the way to the right padding?

Thanks!

To align >, use this CSS

.header-menu-nav-item-content {
    display: block !important;
}
span.chevron.chevron--right {
    float: right;
    margin-top: 8px;
}

With padding, use this

div.header-menu-nav-folder--active div.header-menu-nav-item a {
    margin-left: 0 !important;
}

@tuanphan the site password is: fivestars

https://lemon-flower-srp5.squarespace.com/

I need the logo on desktop and mobile (it's off center now), the hamburger on the left, and the book now button on the right with social icon.

On 9/7/2023 at 2:04 AM, savvysocialite said:

@tuanphan the site password is: fivestars

https://lemon-flower-srp5.squarespace.com/

I need the logo on desktop and mobile (it's off center now), the hamburger on the left, and the book now button on the right with social icon.

Hi,

Do this?

@tuanphan yes, exactly! 

Add this code to Website > Website Tools > Custom CSS

/* Header */
.header-display-desktop .header-burger {
    order: 1 !important;
}

.header-display-desktop .header-title-nav-wrapper {
    order: 2 !important;
}

.header-display-desktop .header-actions.header-actions--right {
    order: 3 !important;
}

.header-display-desktop .header-title-logo a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.header-display-desktop .header-announcement-bar-wrapper {
    padding-top: 4vw !important;
    padding-bottom: 4vw !important;
}