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

Support
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 Likes
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

4 Likes
3

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

https://meta.discourse.org/t/rearrange-sidebar-order/273405/2?u=aurora

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;
  }
}
3 Likes
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.

6 Likes
10

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

1 Like
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”.

3 Likes