# Hamburger menu slide direction

**URL:** https://meta.discourse.org/t/hamburger-menu-slide-direction/208168
**Category:** Development
**Created:** [November 3, 2021, 9:10pm UTC](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168 "2021-11-03T21:10:50Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![lstuartfry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lstuartfry/32/236018_2.png) [@lstuartfry](https://meta.discourse.org/u/lstuartfry)
#### Post date: [November 3, 2021, 9:10pm UTC](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168/1 "2021-11-03T21:10:50Z")

</div>

Hey everyone, I’m trying to configure (on mobile devices) the hamburger panel to slide out from the right-hand side of the screen, exactly the same as the profile panel is configured. I see there is a `left: 0` rule that exists specifically for the hamburger panel. I’ve been tweaking the CSS but have been unable to replicate the slide-left behavior of the profile panel. There doesn’t appear to be a whole lot of CSS specific to the hamburger panel, so I’m not exactly sure what I’m missing.

I’d appreciate any tips or insights on what I may be missing here! Thanks all.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [November 5, 2021, 5:33am UTC](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168/2 "2021-11-05T05:33:51Z")

</div>

Hey Lukas, welcome to Meta 👋

There’s isn’t a lot of CSS involved in this. The animation is handled with CSS, but the values for the offset are set in JavaScript to handle the case where the user scrolls/pans to the right or left to close the menus.

Most of that logic is here - that’s just one method; there’s a few others involved in that file  
[discourse/app/assets/javascripts/discourse/app/components/site-header.js at 8a250a1eac9032485e7d367f93e6ac418014e2ff · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/8a250a1eac9032485e7d367f93e6ac418014e2ff/app/assets/javascripts/discourse/app/components/site-header.js#L40)

There’s also some logic that handles the case when the user clicks on the dimmed background to close the menus.

for the user menu

[discourse/app/assets/javascripts/discourse/app/widgets/user-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/widgets/user-menu.js#L267-L296)

For the hamburger menu

[discourse/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L368-L397)

Changing those to make the hamburger menu open and close on the right will involve two things.

1. modify the `site-header` component with [ModifyClass](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L166-L182) so that it opens all the menus from the right side. It currently [checks for a class](https://github.com/discourse/discourse/blob/8a250a1eac9032485e7d367f93e6ac418014e2ff/app/assets/javascripts/discourse/app/components/site-header.js#L354) on the menu, so we simply override that like so

2. when closing the menu, we also want it to close to the right side. For the scroll/pan event, this is already handled by the snippet above. Now we need to fix the case where the user clicks on the dimmed background. Discourse decides that based on [whether or not the site uses an RTL language](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L381-L383). To modify this, we need a different plugin-api method since the hamburger panel is a widget.

Then all you need to do is add a couple of lines of CSS to override the default styles for that menu like so

```scss
.hamburger-panel,
.user-menu {
  .menu-panel.slide-in {
    left: unset;
    right: 0;
  }
}

```

Now let’s put all of that together. This goes in the `mobile > header` tab of your theme

```xml
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
  pluginId: "right-side-mobile-hamburger",
  _leftMenuClass() {
    // we don't want any left menus, so return false
    return false;
  }
});

api.reopenWidget("hamburger-menu", {
  clickOutsideMobile() {
    // apply the code from core
    this._super(...arguments);

    // then make your change so that it closes to the right side
    const panel = document.querySelector(".menu-panel");
    const windowWidth = document.body.offsetWidth;
    panel.style.setProperty("--offset", `${windowWidth}px`);
  }
});
</script>

```

and this goes in `mobile > CSS` tab.

```scss
.hamburger-panel,
.user-menu {
  .menu-panel.slide-in {
    left: unset;
    right: 0;
  }
}

```

Once you save the theme and refresh the page, the hamburger menu will open and close on the right side on mobile - just like the user menu.

---

<div class="post-metadata">

### Author: ![asirota](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/asirota/32/197298_2.png) [@asirota](https://meta.discourse.org/u/asirota)
#### Post date: [November 5, 2021, 9:13am UTC](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168/3 "2021-11-05T09:13:14Z")

</div>

Now that’s how you provide a complete answer. Well done!

---

<div class="post-metadata">

### Author: ![lstuartfry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lstuartfry/32/236018_2.png) [@lstuartfry](https://meta.discourse.org/u/lstuartfry)
#### Post date: [November 5, 2021, 5:46pm UTC](https://meta.discourse.org/t/hamburger-menu-slide-direction/208168/4 "2021-11-05T17:46:55Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/3/5/35819b74c878a986ae4a2c2eac6cdd817b5b1bad.jpeg)

Amazing! Thank you so much for the detailed response Joe! A+ customer service, I am impressed and very thankful.