/** * @author Torsten Grothoff * @name navbar.css * @description Makes the navigation bar have styles * @license LGPL-3.0-or-later */ .navcontainer{ overflow:hidden; background:#144; margin-bottom:50px; width:100%; color:white; position:-webkit-sticky; position:sticky; top:0px; width: 100vw; backdrop-filter: blur(10px); opacity: 1; z-index: 10000; } nav { left: 1vw; position: relative; background:#144; z-index: 10000; } nav a, nav span,.navbtn { border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; background: #00000000; height: inherit; } nav a, nav span,.navbtn{ padding: 15px 32px; } nav a:hover, nav span:hover,.navbtn:hover { background: #00000022; } nav a.active, nav span.active,.navbtn.active { background-color: #4CAF50; } nav a.active:hover, nav span.active:hover,.navbtn.active:hover { background: #377c39; } nav a, nav span,.navbtn { cursor: pointer; } nav .right { // input[type=checkbox] { // // // opacity: 0; // // // position: absolute; // // position: relative; // // left:0.5vw; // // // top:0; // // width: inherit; // // height: inherit; // // $sx: 1.5; // // $sy: 1.5; // // -ms-transform: scale($sx,$sy); /* IE */ // // -moz-transform: scale($sx,$sy); /* FF */ // // -webkit-transform: scale($sx,$sy); /* Safari and Chrome */ // // -o-transform: scale($sx,$sy); /* Opera */ // // transform: scale($sx,$sy); // // float:right; // opacity: 0; // } // input[type=checkbox]:checked + div.nav { // display: block; // } // input[type=checkbox] + div.nav { // display: none; // } div.nav { display: none; } div.nav:hover { display: block; } float:right; margin-right: 5vw; } nav .right:hover { div.nav { display:block; } } // input[type=checkbox]:checked + label { // color: red; // }