Overlay vertical sidebar on top of content

Question

How can I overlay vertical sidebar when expanded, rather than pushing content to the right?

https://stackblitz.com/edit/clarity-sgfqmc

Questions seeking help with code should contain [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/minimal-reproducible-example) in the question itself rather than a link that may stop working in the future. — Cray, Jun 14 '19 at 05:17

score 1 · Accepted Answer · answered Jun 14 '19 at 05:11

1

Use fixed position:

.clr-vertical-nav {
   position: fixed;
   height: 100%;
}

You will also need to use margin on your content to make sure it is not partly covered when menu is closed.

.content-area {
   margin-left: 2rem;
}

answered Jun 14 '19 at 05:11

Cray

2,774
7
22
32

score -1 · Answer 2 · answered Jun 14 '19 at 05:08

-1

You can try to overwrite the layout with some custom CSS:

clr-vertical-nav {
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
  overflow: auto;
  overflow-x: hidden;
}
.content-area {
  margin-left: 48px;
}

answered Jun 14 '19 at 05:08

Marco Plüss

59
1
3

Overlay vertical sidebar on top of content

2 Answers2