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

[Aurora]

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!

[Lilly (Lillian Louis)]

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

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

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:

[Aurora]

Danke! Ich hatte gerade das gefunden und umgesetzt - aber mobil funktionierte es nicht

Rearrange Sidebar Order?

since the navigation menu sidebar-sections class is using the display = "flex" property you can do something like this - just change the numbers based on what order you want the sections to appear: in common css .sidebar-section-wrapper.sidebar-section[data-section-name="categories"] { order: 1; } .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] { order: 2; } .sidebar-section-wrapper.sidebar-section[data-section-name="chat-dms"] { order: 3; } .sidebar-section-wrappe…

[Aurora]

hier war es wohl auch schon mal ein Thema - aber das funktioniert auch nicht

How to sort nav menu sections?

Hi @Lilly I used your CSS code to rearranged the order of the nav sections. It works well when the webpage in the full size. [image] However, I try to resize the webpage to a smaller width, the order settings in the CSS code are invaild. The last section turned to the second just like the following pic: [image] I found that the display: block; property of the sidebar-sections prevents the order from having an effect. Then, I try to add some code to the CSS code. .sidebar-sections…

[chapoi]

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;
  }
}

[Aurora]

Danke! Habe es gerade ausprobiert - hat aber leider nicht funktioniert.

[chapoi]

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.

[Aurora]

Vielen Dank!! Das funktioniert!! Super!