I want to add a Hamburger menu to my Taste theme when in desktop and align it to the top left

Retired Boards Appdev Store Design

Topic summary

Goal: add a hamburger menu to the Shopify Taste theme on desktop, aligned top-left near the logo, and move the search icon to the left alongside login and cart. Current mobile/tablet behavior is correct.

Proposed approach: edit the theme’s header.liquid (Shopify’s header template) to define a new navigation block for the hamburger menu, then style it with CSS. The provided CSS includes classes like .mobile-nav (top/left positioning), .toggle-button, and .hamburger (three-bar icon using pseudo-elements), plus a checkbox-based toggle to show/hide .nav.

Technical notes: header.liquid is the file where the header layout and navigation markup live; the hamburger menu is a compact icon that reveals navigation; CSS controls positioning and visibility.

Open issues: a participant asked for clarification on exactly where in header.liquid to locate the existing navigation code and how the new menu markup should look, indicating the placement is unclear. Guidance on moving the search icon to the left was not detailed.

Status: no final resolution; code snippets are central to implementing the solution, and further instructions on exact code placement are needed.

Summarized with AI on January 28. AI used: gpt-5.
1

Hi everyone,

I need help, I want to add a Hamburger menu to my Taste theme when in desktop and align it to the top left to my logo.

When in mobile or tablet the hamburger menu appears correctly.

Also i would like my search icon to be on the left as the login and cart icon. That’s all guys!!

Any input will help!!

My website is https://www.bingabo.com

Thanks in advance!

Best regards,

Dimitris

1 Like
2

hello there!

To add a hamburger menu to your Taste theme on desktop and align it to the top left, you’ll need to make a few customizations to your theme’s code. Here are the steps you’ll need to follow:

  1. Create a new navigation menu: From the “Edit code” page, go to “Sections” and then select “header.liquid.” Find the section of code that defines the existing navigation menu and create a new menu for your hamburger menu. For example:

Style the hamburger menu: To style the hamburger menu, you’ll need to add some CSS to your theme’s stylesheet.

/* Add this CSS for hamburger menu */
.mobile-nav {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
}

.toggle-button {
  position: relative;
  display: inline-block;
  float: right;
  cursor: pointer;
}

.hamburger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 3px;
  background-color: #333;
  display: block;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  top: -7px;
  background-color: #333;
  width: 25px;
  height: 3px;
}

.hamburger:before {
  transform: rotate(45deg);
}

.hamburger:after {
  transform: rotate(-45deg);
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked ~ .nav {
  display: block;
}

.nav {
  display: none;
}
3

I am going through the same issue, but don’t know exactly where to find the section of code that defines the existing navigation menu and create a new menu for your hamburger menu.

Could you clarify how this part would look, please? Thank you :slightly_smiling_face: