How to set up a hamburger menu on all versions of Align theme?

Store Design
, ,
1

Hi,

I would like to have the Hamburger menu setup on ALL versions of the theme (Mobile & Desktop) on the theme Align.

Here is my website

Also, I would like to get my logo centered in the header after the hamburger is setup.

Thank you in advance

2

Hello @GregoryLausch ,

It’s possible but needs customization.
So I suggest posting a featured request to theme support or ask a developer.

Thanks

3

Hi @GregoryLausch

That would require editing your theme code. We can not do it with just few lines of code.

4

Hello @GregoryLausch ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → header.liquid file

Add a media query in the theme’s CSS file to control the menu’s behavior based on the breakpoint you determined, like this:

@media screen and (max-width: 768px) {
  .main-menu {
    display: none;
  }
  .hamburger-menu {
    display: block;
  }
}

Create the hamburger menu in HTML and CSS. Here’s a basic example:

Use JavaScript or jQuery to toggle the display of the hamburger menu when clicked, like this example:

$('.hamburger-menu').click(function() {
  $('.main-menu').slideToggle();
});

Save and preview

Hope this can help.

Ali Reviews team.