@import 'colors', 'mixins'; // ——— MENU ——- // based on this codepen // codepen.io/andreasstorm/pen/lriga // by codepen.io/andreasstorm/ header {
display: flex; /* or inline-flex */ justify-content: center; height: 5em; // padding-top: 40px;
}
.inner {
// max-width: 100%; // margin: 0 auto; padding: 0px 20px; position: relative;
}
.logo {
text-decoration: none; color: rgb(17, 17, 17); font-weight: 800; font-size: 5em; // line-height: 40px;
}
nav>ul {
// float: right; // max-width: 800px; border-bottom: 1px solid black; padding: auto;
}
nav > ul > li:first-of-type {
margin-left: 0;
} nav>ul>li {
text-size: 0.9em; text-align: center; line-height: 1.2em; // margin-left: 0.5em; // first is top bottom second is left right margin: auto 0.25em; [class^="icon-"], [class*=" icon-"] { height: 30px; width: 30px; position: relative; top: 10px; }
}
nav>ul li ul {
display: none; padding: 0; list-style-type: none;
}
nav>ul li ul li {
width: 100%; text-align: left; white-space: nowrap; // stop the wrapping in the first place
}
nav ul li:hover {
cursor: pointer; position: relative; text-decoration: underline;
}
nav ul li:hover>ul {
display: table;
}
nav ul li:hover>a {
// color: #777;
}
nav>ul>li>a {
cursor: pointer; display: block; outline: none; width: 100%; text-decoration: none;
}
nav>ul>li {
float: left; list-style: none;
}
// nav a { // color: white; // } nav>ul li ul {
display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 2000;
}
nav>ul li ul li>a {
text-decoration: none;
}
[type=“checkbox”], label {
display: none;
}
[type=“checkbox”]:not(:checked)~ul {
border-bottom: 0px solid black;
}
@media screen and (max-width: 800px) {
header { display: initial; // justify-content: flex-end; } nav ul { display: none; padding: 0; background: $backgroundColor; } label { display: block; //background: #222; width: 40px; height: 40px; cursor: pointer; position: absolute; right: 0px; top: 0px; @include rounded(0, 0, 0, 5px); } label:after { content: ''; display: block; width: 30px; height: 5px; background: $colLinks; margin: 7px 5px; box-shadow: 0px 10px 0px $colLinks, 0px 20px 0px $colLinks } [type="checkbox"]:checked~ul { display: block; z-index: 9999; position: absolute; right: -20px; left: -20px; top: 20px; } [type="checkbox"]:not(:checked)~ul { border-bottom: 0px solid black; } nav a { color: #777; } nav ul li { display: block; float: none; width: 100%; text-align: left; //background: #222; line-height: 1.7em; text-indent: 40px; text-decoration: none; } nav ul li:hover { text-decoration: none; } nav>ul>li { margin-left: 0px; } nav>ul li ul li { display: block; float: none; list-style: none; margin-left: 0.5em; } nav>ul li ul { display: block; position: relative; width: 100%; z-index: 9999; float: none; }
}