How to control the order of menu sections in the sidebar?

Product Support

AI-generated summary

User Aurora asked how to reorder sidebar sections, specifically to place custom sections below categories. Lilly provided an initial CSS solution using order properties within a local component, but Aurora noted it failed on mobile devices. chapoi suggested adding the .sidebar-hamburger-dropdown class to the CSS for mobile compatibility. When this still didn’t work, chapoi identified that the mobile sidebar lacks display: flex and provided additional CSS to enable flexbox on .sidebar-sections. Aurora confirmed the final solution worked perfectly. Additionally, rakekniven asked how to handle spaces in custom section names, discovering that spaces must be replaced with hyphens (e.g., “Help users” becomes help-users) in the data-section-name selector.

1

Hi everyone,

I’m running into an issue with the sidebar menu in my Discourse forum. The order of the sections seems fixed — for example, when I create additional custom sections, they always appear above the “Categories” section.

For my community, it would be important to have those custom sections below the categories instead, but I can’t find any way to change or control this order.

Is there a way to manage the position of sidebar sections, or is it currently not possible to customize the hierarchy/order of these blocks?

Thanks in advance for any guidance!

image
image880×1674 121 KB

2

Hi there, you can control the order of sidebar sections with CSS. Just add a new component with something like the following css code. Go to admin -> themes & compontents -> components and create a new local component

Screenshot 2025-09-20 at 7.50.50 AM
Screenshot 2025-09-20 at 7.50.50 AM1630×1166 171 KB

and add this code to the css tab, where custom-section-name is the slug name of a custom menu section:

.sidebar-wrapper { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}
screenshot of CSS tab

Screenshot 2025-09-20 at 7.56.44 AM
Screenshot 2025-09-20 at 7.56.44 AM1186×1174 83.1 KB

You will have to change the numbers and add custom sections to the above code to suit your specific needs. It will looks something like this:

Screenshot 2025-09-20 at 7.58.17 AM
Screenshot 2025-09-20 at 7.58.17 AM538×1142 32.7 KB

3

Thanks! I had just found and implemented that - but it didn’t work on mobile

6

This was apparently also an issue here - but this doesn’t work either

https://meta.discourse.org/t/how-to-sort-nav-menu-sections/289656/3?u=aurora

7

The sidebar-wrapper class on mobile is replaced by sidebar-hamburger-dropdown I believe. So adding that should make it work on mobile too:

.sidebar-wrapper, 
.sidebar-hamburger-dropdown { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}
8

Thanks! I just tried it - unfortunately it didn’t work. :folded_hands:

9

Oh right one more detail: the sidebar isn’t using flex on mobile apparently. So you’d need to add that too.

.sidebar-sections {
display: flex;
flex-direction: column;
}

I’ve only tested this briefly, so not sure what else this would impact. But that’s what is blocking.

10

Thank you very much!! That works!! Great!

13

The header name of my custom section contains a space e.g., “Help users.”

I tried to use `data-section-name=“help users”`, but that does not work.

How can I specify the space? Does any masking need to be done here?
Please help

EDIT:
After inspecting site using dev tools of FF I found the solution is “help-users”.