Hoe de volgorde van menu-secties in de zijbalk te regelen?

Ondersteuning
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

De sidebar-wrapper klasse op mobiel wordt vervangen door sidebar-hamburger-dropdown, geloof ik. Dus door die toe te voegen zou het ook op mobiel moeten werken:

.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, nog één detail: de zijbalk gebruikt blijkbaar geen flex op mobiel. Dus dat moet je er ook nog bij zetten.

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

Heel erg bedankt!! Dat werkt!! Super!

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