.offcanvas-menu > label, .offcanvas-menu nav > div label { content: ""; display: flex; position: fixed; top: 190px; left: 0px; cursor: pointer; transition: 0.3s ease; transform: rotate(-90deg); align-items: center; justify-content: center; z-index: 510; } /* The button label */ .offcanvas-menu label span, .offcanvas-menu label span::before, .offcanvas-menu label span::after { content: ""; position: fixed; top: 50%; left: 4px; background-color: #4f4f4f; padding: 3px 8px; border-radius: 6px 0px 6px 6px; color: #ffffff; font-weight: 300; font-size: 1em; white-space: nowrap; } /* The menu background */ .offcanvas-menu nav { position: fixed; top: 88px; height: auto; width: 40vw; left: -43vw; padding: 9px 6px 0px 0px; overflow: auto; background: #FFFFFF; transition: 0.3s ease; border: solid #4f4f4f; border-width: 1px 1px 1px 29px; border-radius: 0px 6px 6px 0px; z-index: 505; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* The list of links */ .offcanvas-menu nav > ul { padding-left: 0 !important; } #toc li.nav-item { list-style-type: none !important; } /* The list items */ .offcanvas-menu nav > ul li { cursor: pointer; line-height: normal; padding-left: 0 !important; padding-bottom: 0 !important; margin-top: 1em; background-image: none !important; } /* Functionality of the trigger */ .offcanvas-menu input[type=checkbox] { display: none; } .offcanvas-menu input[type=checkbox]:checked ~ label { opacity: 0; pointer-events: none; } .offcanvas-menu input[type=checkbox]:checked ~ nav { left: 0px; } .offcanvas-menu input[type=checkbox]:checked ~ nav label span:before, .offcanvas-menu input[type=checkbox]:checked ~ nav label span:after { transition-delay: 0.2s; } .offcanvas-menu h3 { text-align: left !important; margin: 0px; } .offcanvas-menu ol li { margin-bottom: 4px; } ol > li::marker { font-weight: bold; } /* Media query */ /*@media (max-width: 1680px) { }*/ @media (max-width: 1199px) { /* The menu background */ .offcanvas-menu nav { width: 60vw; left: -63vw; } }