# How to sort nav menu sections?

**URL:** https://meta.discourse.org/t/how-to-sort-nav-menu-sections/289656
**Category:** Support
**Tags:** sidebar
**Created:** [December 23, 2023, 9:56pm UTC](https://meta.discourse.org/t/how-to-sort-nav-menu-sections/289656 "2023-12-23T21:56:31Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Skeleton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/skeleton/32/335075_2.png) [@Skeleton](https://meta.discourse.org/u/Skeleton)
#### Post date: [December 23, 2023, 9:56pm UTC](https://meta.discourse.org/t/how-to-sort-nav-menu-sections/289656/1 "2023-12-23T21:56:31Z")

</div>

I created a custom section with a few useful links for the community. I wanted to set the section to be just below the categories section but i can’t find any option built in or theme component. Anyone can help?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 24, 2023, 5:44pm UTC](https://meta.discourse.org/t/how-to-sort-nav-menu-sections/289656/2 "2023-12-24T17:44:18Z")

</div>

Hi @Skeleton 👋

You can use this CSS code here to do this:

> [@Sidebar Section Rearrangement](https://meta.discourse.org/t/sidebar-section-rearrangement/288007/3):
>
> There’s not a setting for this, but it can be done by adding CSS to admin/customize/themes .sidebar-wrapper { .sidebar-custom-sections { display: contents; } [data-section-name="community"] { order: -3; } [data-section-name="categories"] { order: -2; } [data-section-name="custom-section-title-here"] { order: -1; } }

---

<div class="post-metadata">

### Author: ![xigua](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xigua/32/384466_2.png) [@xigua](https://meta.discourse.org/u/xigua)
#### Post date: [May 9, 2024, 7:55am UTC](https://meta.discourse.org/t/how-to-sort-nav-menu-sections/289656/3 "2024-05-09T07:55:24Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/2/2/5/225428619c5104d741034cc5bc2137072105e9dc.png)

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](https://global.discourse-cdn.com/meta/original/4X/8/8/7/8879343f97dd7d6d05e3f7d93ae1c61a9a220116.png)

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.

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

```

And now the order of the sections is under controll.