# Permanently collapse default accordion menu

**URL:** https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342
**Category:** Bootstrap Studio Help
**Created:** [May 17, 2021, 8:24pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342 "2021-05-17T20:24:55Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![pyIcarus](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/pyicarus/32/1247_2.png) [@pyIcarus](https://forum.bootstrapstudio.io/u/pyIcarus)
#### Post date: [May 17, 2021, 8:24pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/1 "2021-05-17T20:24:55Z")

</div>

Hello everyone - noobie here, please be kind! I’m trying to disable the collapse/expand capabilities of the default side accordion menu in my template. I would ideally like it to permanently remain in the collapsed view. Any help would be appreciated!

collapsed:

 ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/2/260cf73c71d6dd0e4fda57a2b9a4124cb0c55366.png)  
not collapsed: ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/2/2f04658a6247dee2c47426486b7b0661dc9a9eeb.png)

---

<div class="post-metadata">

### Author: ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [May 17, 2021, 9:08pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/2 "2021-05-17T21:08:41Z")

</div>

On the top navbar add the class toggled like this

```auto
 <nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0 toggled">

```

then hide or delete the round button with the arrows \> \< at the bottom of the sidebar

---

<div class="post-metadata">

### Author: ![pyIcarus](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/pyicarus/32/1247_2.png) [@pyIcarus](https://forum.bootstrapstudio.io/u/pyIcarus)
#### Post date: [May 17, 2021, 9:16pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/3 "2021-05-17T21:16:29Z")

</div>

Thank you very much! Any idea how I can make it so that all the items inside that side nav bar stays available while scrolling? I tried position “Fixed to top”, but it bring part of the body behind the navbar.

---

<div class="post-metadata">

### Author: ![pyIcarus](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/pyicarus/32/1247_2.png) [@pyIcarus](https://forum.bootstrapstudio.io/u/pyIcarus)
#### Post date: [May 17, 2021, 11:04pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/5 "2021-05-17T23:04:34Z")

</div>

Yes, yes, yes! Except your hamburger menu doesn’t work on a smaller window.

---

<div class="post-metadata">

### Author: ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [May 17, 2021, 11:12pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/6 "2021-05-17T23:12:35Z")

</div>

the hamburger menu works now

---

<div class="post-metadata">

### Author: ![pyIcarus](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/pyicarus/32/1247_2.png) [@pyIcarus](https://forum.bootstrapstudio.io/u/pyIcarus)
#### Post date: [May 17, 2021, 11:18pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/7 "2021-05-17T23:18:41Z")

</div>

What did you do to it? I added the fixed-top parts, but it put the body behind them.

---

<div class="post-metadata">

### Author: ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)
#### Post date: [May 17, 2021, 11:32pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/8 "2021-05-17T23:32:38Z")

</div>

add this to your styles.css

```auto
@media (min-width: 768px) {
  #content-wrapper {
    margin-left: 104px;
  }
}

@media (min-width: 768px) {
  .topbar {
    margin-left: 104px;
  }
}

```

---

<div class="post-metadata">

### Author: ![pyIcarus](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/pyicarus/32/1247_2.png) [@pyIcarus](https://forum.bootstrapstudio.io/u/pyIcarus)
#### Post date: [May 17, 2021, 11:45pm UTC](https://forum.bootstrapstudio.io/t/permanently-collapse-default-accordion-menu/7342/9 "2021-05-17T23:45:22Z")

</div>

This might be a very very stupid question, but (really green in front-end dev) when you say styles.css you mean Footer-Basics.css / Header-Blue.css or a brand new styles.css file? Also, when using the hamburger menu the blue bar goes behind the white one, and if you click the hamburger menu and then max the screen it makes the side bar get stuck on the large view. Lastly, the top nav bar hides the top part of the page. Yikes!