Vertical toolbar

ux
1

Does anyone know how to create a vertical toolbar like the Docker 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!

SNAG-0000.jpg1395×1107 152 KB

1 Like
2

below css are used to achive their sidebar header

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;
}
1 Like
3

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.

4

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>

4 Likes
5

That works! Thanks so much!