# Vertical toolbar

**URL:** <https://meta.discourse.org/t/vertical-toolbar/51254>\
**Category:** UX\
**Created:** [October 8, 2016, 5:53am UTC](https://meta.discourse.org/t/vertical-toolbar/51254 "2016-10-08T05:53:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)\
**Post date:** [October 8, 2016, 5:53am UTC](https://meta.discourse.org/t/vertical-toolbar/51254/1 "2016-10-08T05:53:00Z")

</div>

Does anyone know how to create a vertical toolbar like the [Docker](https://forums.docker.com/) Discourse forum? I tried to create via HTML and CSS, but it either shows up in the top section or in the body, but not the entire left hand side.

Thanks!

 ![](https://global.discourse-cdn.com/meta/original/3X/1/c/1c6b19e891aa092f03141108a5f660d2f867d2ef.jpg)

---

<div class="post-metadata">

**Author:** ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)\
**Post date:** [October 8, 2016, 6:46am UTC](https://meta.discourse.org/t/vertical-toolbar/51254/2 "2016-10-08T06:46:43Z")

</div>

below css are used to achive their sidebar header

```css
body {
    margin: 0 0 0 80px !important;
}
header.sidebar-header {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90000;
    width: 80px;
    overflow: hidden;
    margin: 0;
    box-shadow: 0px 0px 4px #00415d;
}

```

---

<div class="post-metadata">

**Author:** ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)\
**Post date:** [October 8, 2016, 7:59am UTC](https://meta.discourse.org/t/vertical-toolbar/51254/3 "2016-10-08T07:59:12Z")

</div>

Thanks. I still have the same issue, using this CSS. if i put a \< div \> class in any of the html section in Customize, the bar just comes out not in the intended part of the screen.

---

<div class="post-metadata">

**Author:** ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)\
**Post date:** [October 8, 2016, 12:54pm UTC](https://meta.discourse.org/t/vertical-toolbar/51254/4 "2016-10-08T12:54:49Z")

</div>

I tested something, and had no issue :

in CSS

```
.vertical-header {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90000;
    width: 80px;
    overflow: hidden;
    height: 100%;
    margin: 0;
    background: #114a77;
    box-shadow: 0px 0px 4px #00415d;
}

```

in `</body>`

`<div class="vertical-header"></div>`

---

<div class="post-metadata">

**Author:** ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)\
**Post date:** [October 16, 2016, 8:18am UTC](https://meta.discourse.org/t/vertical-toolbar/51254/5 "2016-10-16T08:18:28Z")

</div>

That works! Thanks so much!