# Switch the new sidebar from left to right side (english forum)
**URL:** https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239
**Category:** Feature
**Tags:** sidebar
**Created:** [February 25, 2023, 1:16pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239 "2023-02-25T13:16:06Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [February 25, 2023, 1:16pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/1 "2023-02-25T13:16:06Z")
Hi guys,
I searched the forums and asked about it in the new chat a few days ago. I was advised to post in the forums. Hopefully someone can help.
Is there a plugin to move the new sidebar to the right side?
or is there a built-in way to switch sides from left to right?
---
### Author:  [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [February 26, 2023, 2:28am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/2 "2023-02-26T02:28:45Z")
There is no built in way to do this or any existing plugin that I’m aware of. So while a customization that does may be possible, it would likely be breaking some new ground and may bump into some unforseen issues.
---
### Author:  [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [February 26, 2023, 3:11am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/3 "2023-02-26T03:11:15Z")
For desktop view:
```css
body #main-outlet-wrapper {
grid-template-areas: "content sidebar";
grid-template-columns: minmax(0, 1fr) 0;
}
body.sidebar-animate #main-outlet-wrapper {
grid-template-areas: "content sidebar";
}
body.has-sidebar-page #main-outlet-wrapper {
grid-template-areas: "content sidebar";
grid-template-columns: minmax(0, 1fr) var(--d-sidebar-width);
padding: 0 0 0 10px;
}
```
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [February 26, 2023, 3:38am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/4 "2023-02-26T03:38:53Z")
Thanks. Where do I paste that, here?
---
### Author:  [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [February 26, 2023, 3:40am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/5 "2023-02-26T03:40:11Z")
To be on the safe side, please put it in Desktop-\>CSS
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [February 26, 2023, 3:49am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/6 "2023-02-26T03:49:51Z")
Thanks! It works partially. The sandwich menu is still on the top left and pushes the logo.
I would like the sandwich menu in navbar to remain in the original position with the right-side icons.
Also, toggling the sidebar on actually makes the page width narrower. (I have a custom page width which is ignored when sidebar is enabled)
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 26, 2023, 7:03pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/7 "2023-02-26T19:03:14Z")
Great job @Lhc_fl 👏
> [@haydenjames](#):
>
> I would like the sandwich menu in navbar to remain in the original position with the right-side icons.
There is a site setting for this. Look for **navigation menu** and set it to “Header Dropdown” 🙂
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [February 26, 2023, 9:06pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/8 "2023-02-26T21:06:56Z")
No, you are missing the entire question. When you enable the header dropdown, the sidebar is removed. 🙂
> [@haydenjames](#):
>
> Is there a plugin to **move** the new sidebar to the right side?
The thread is asking about “Switching” the sidebar from left to right and keeping the sandwich on the right where it has always been. (one could argue belongs)
I already have “Header Dropdown” enabled until there is a way to have both the sidebar and icon on the right.
The logo on the left takes you to “forum home” (lovely). But now the logo position is replaced with a sidebar toggle icon, and you can toggle the sidebar by accident. I think all the menu icons should remain on the right.
The sidebar toggle does not need to be constantly toggled, so to move it left of the logo is too much of a hotspot.
Same with the sidebar, I prefer the page content to be left and the sidebar right.
It’s personal preference only, I’m sure. So only inquiring, as other forum owners must be ok with everything left.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 26, 2023, 11:44pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/9 "2023-02-26T23:44:45Z")
Ah, yes, I understand. I forgot that the right hamburger doesn’t trigger a real sidebar. Same content but more of a dropdown, not a sidebar, which you want.
I had a look at the Discourse’s code which unfortunately still looks like some wizard’s cryptic formulas
to me
🧙 📜
It _seems_ that the two components are rendered very differently.
The header content that contains the sidebar toggle widget: [discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/fde9e6bc25227b69195181d45ee4360c25c279da/app/assets/javascripts/discourse/app/widgets/header-contents.js)
The sidebar widget: [discourse/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js at 5b6604f5a7e1c8ff29fe556236dbf86872908b03 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/5b6604f5a7e1c8ff29fe556236dbf86872908b03/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js)
The current right hamburger code: [discourse/app/assets/javascripts/discourse/app/widgets/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/c43cb0c5716a3671a682c87295f5a7dad61eb65d/app/assets/javascripts/discourse/app/widgets/header.js#L314)
Maybe that would help some to create a theme component for this purpose.
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [February 27, 2023, 6:29am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/10 "2023-02-27T06:29:20Z")
Thanks! It’s a grilled cheese sandwich btw not a hamburger. 🤓
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [February 27, 2023, 8:11pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/11 "2023-02-27T20:11:26Z")
I’m curious to understand why you want to move the menu to the right side? Is this feedback you think would be better for all sites, or is there a particularity of your own site that makes the left side location not suitable? Do you have another menu there, for instance? Otherwise I think the left side location for a navigation menu that can be hidden/shown is becoming industry standard..
> [@haydenjames](#):
>
> It’s a grilled cheese sandwich btw not a hamburger. 🤓
Whichever term makes you hungrier! 🤣 Though I think hamburger is more recognizable. Personally, I like calling it the hamburglar! 🕵️♂️
---
### Author:  [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [February 28, 2023, 5:20am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/12 "2023-02-28T05:20:32Z")
Well, add this line.
```css
span.header-sidebar-toggle {
order: 1;
}
```
> [@Lhc\_fl](#):
>
> ```css
> body #main-outlet-wrapper {
> grid-template-areas: "content sidebar";
> grid-template-columns: minmax(0, 1fr) 0;
> }
>
> body.sidebar-animate #main-outlet-wrapper {
> grid-template-areas: "content sidebar";
> }
> body.has-sidebar-page #main-outlet-wrapper {
> grid-template-areas: "content sidebar";
> grid-template-columns: minmax(0, 1fr) var(--d-sidebar-width);
> padding: 0 0 0 10px;
> }
>
> ```
---
### Author:  [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [February 28, 2023, 5:51am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/13 "2023-02-28T05:51:17Z")
FWIW I had some users request it being on the right side after I rolled it out. Maybe they were used to the hamburger location?
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [March 17, 2023, 10:09pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/14 "2023-03-17T22:09:22Z")
> [@Discourse 3.0 is Here!](https://meta.discourse.org/t/discourse-3-0-is-here/251372/18):
>
> How can I move the sidebar to the right? Or at least the menu button in the top nav to the right? since it moves my forum logo when enabled.
Thanks for the hard work and updates. ☕
Is this possible now, by any chance?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 17, 2023, 11:21pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/15 "2023-03-17T23:21:22Z")
Hi @haydenjames 🙂
You already asked that as a feature request here.
There is no need to post multiple times on different topics, so I moved your post from [Discourse 3.0 is Here!](https://meta.discourse.org/t/discourse-3-0-is-here/251372) 🙂
Also, @Lhc_fl provided nice workarounds. 👍
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [March 17, 2023, 11:34pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/16 "2023-03-17T23:34:33Z")
Workaround was indeed almost there. I just needed the hamburger to remain the second icon from the right and not the first to the right. But @Lhc_fl confirmed that that could not be achieved via CSS alone.
I prefer to have content left and the sidebar (less used) right - without moving the _original_ hamburger icon location.
Edit: I think allowing the freedom to choose sides and not split the right side icons into left and right will encourage more forum owners to enable the sidebar.
Currently, enabling the sidebar splits up the menu icons to far left and right and moves the forum logo so that the hamburger icon is now right next to forum-home clicks.
I would like to retain this:
While having this:
If possible in the future… Thanks. 🤝
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 18, 2023, 2:41pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/17 "2023-03-18T14:41:09Z")
You might be able to modify this theme component possibly to achieve the hamburger menu position.
> [@Left side hamburger menu on mobile](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513):
>
> One thing we never got around to and caused some confusion after our work on [Full height, slide out hamburger menu](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789) was that the hamburger menu, on the right side, opens a menu from the left side. For those interested in rearranging the header, this is for you: Mobile menus appearing in the upper-left corner of the screen is not very reachable single-handedly which is why this is a standalone theme component. Options, yanno? hammer_and_wrench…
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [March 18, 2023, 2:49pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/18 "2023-03-18T14:49:56Z")
Not sure I follow. Apologies. The screenshots on that [plugin](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513) looks exactly the same as the new Discourse approach of splitting the icons far-left and far-right.
However, I don’t want the menu _toggle_ hamburger icon to be so close to the return-to-forum-home logo. I want to toggle on the sidebar and then use the forums normally without having the sidebar toggle icon in the hot-spot left logo location.
Currently toggling the menu OFF - as devs have implemented it - adds no value or advantage because the page width returns to an already too narrow width. This all means most users won’t be constantly toggling sidebar on and off - rightfully so.
Even if they did, having the hamburger icon to the left of the return-home logo hot-spot isn’t (IMO) a good place and goes against the previous design of Discourse, where all icons are on the right side of the top menu bar. I would like to retain that:
…while also keeping content left and having the sidebar to right. (as per the above screenshot)
Thanks for responding! I will continue reading more about that plugin to better understand if we are referring to the same changes.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 18, 2023, 5:02pm UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/19 "2023-03-18T17:02:35Z")
What I meant was that combined with moving the panel to the right with @Lhc_fl component. Studying the code in the component I linked, you might be able to put the hamburger menu back between the search and profile. If I understand your request and issue with the current workaround made by Lhc\_fl.
As it already uses code to move the menu it might have details in the code as an example to modify to be able achieve the desired effect your looking for.
On mobile your screenshot is in the desired position your looking for on Desktop mode.
Someone with the experience might be able to extract the code used in mobile as well and apply that to desktop. Via either or both studying inspect element on desktop while loading site in mobile view.
For width there is a new component to change site width that maybe of interest to explore.
> [@Discourse Custom Width](https://meta.discourse.org/t/discourse-custom-width/256171):
>
> information_sourceSummary Set a custom width for your Discourse forumeyeglassesPreview [https://discourse.theme-creator.io/theme/Canapin/custom-discourse-width](https://discourse.theme-creator.io/theme/Canapin/custom-discourse-width) (1400px width)hammer_and_wrenchRepository [GitHub - Canapin/Discourse-custom-width: Set a custom width for your Discourse site.](https://github.com/Canapin/Discourse-custom-width)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component T…
---
### Author:  [@haydenjames](https://meta.discourse.org/u/haydenjames)
#### Post date: [May 3, 2023, 11:12am UTC](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239/20 "2023-05-03T11:12:32Z")
> [@Heliosurge](#):
>
> On mobile your screenshot is in the desired position your looking for on Desktop mode.
>
> Someone with the experience might be able to extract the code used in mobile as well and apply that to desktop. Via either or both studying inspect element on desktop while loading site in mobile view.
Yes, I’m hoping for this. You are correct about the mobile vs desktop menu icons.
[Next page](https://meta.discourse.org/t/switch-the-new-sidebar-from-left-to-right-side-english-forum/256239.md?page=2)