כיצד לשלוט בסדר קטעי התפריט בסרגל הצד?

[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]

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]

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

[Aurora]

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

[chapoi]

המחלקת sidebar-wrapper במובייל מוחלפת ב-sidebar-hamburger-dropdown לדעתי. לכן הוספתה אמורה לגרום לכך שזה יעבוד גם במובייל:

.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]

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

[chapoi]

נכון, עוד פרט אחד: הסרגל הצדדי לא משתמש ב-flex במובייל, כנראה. אז תצטרכו להוסיף גם את זה.

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

[Aurora]

תודה רבה!! זה עובד!! מעולה!

[rakekniven]

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