app/assets/stylesheets/styles/_nav.scss
.stackable.menu-container.nav-menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #FFFFFF;
font-weight: normal;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
min-height: 2.85714286em;
border-radius: 0;
margin: 0;
background-color: $background-color;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
height: 100px;
.menu {
margin: 0em;
padding-left: 20px;
img {
position: absolute;
height: 80px;
top: 50%;
transform: translateY(-50%);
}
.fa {
display: none;
}
}
.mobile-icon {
display: none;
}
.items {
background-color: $background-color;
z-index: 333;
top: 50%;
transform: translateY(-50%);
display: flex;
position: absolute;
right: 0;
a.item.nav-item {
color: $black;
font-weight: bold;
}
.item {
position: relative;
vertical-align: middle;
line-height: 1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: none;
padding: 0.92857143em 1.14285714em;
text-transform: none;
font-weight: normal;
-webkit-transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
p {
margin: 0;
}
&.active {
border-bottom: 2px solid $red;
}
&:hover:not(.active) {
p {
transform: translateY(-10px);
}
}
}
&:last-child {
padding-right: 20px;
}
}
input[type=checkbox] {
display: none;
}
@include media-query($tablet) {
.mobile-icon {
display: block;
}
.desk-icon {
display: none;
}
.fa {
display: none;
}
.item.nav-item {
padding: 0.92857143em 0.4em;
p {
font-size: 14px;
}
}
}
@include media-query($on-palm) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
text-align: center;
.menu {
padding-left: 0;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
position: relative;
width: 150px;
label {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
width: 150px;
.fa.fa-caret-down {
display: block;
}
}
}
.items {
display: none;
left: 0;
top: 274px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.item {
width: 100%;
&:hover {
background-color: $grey-color-light;
}
&.active {
border-bottom: none;
}
&:hover:not(.active) {
p {
transform: translateY(0px);
transform: translateX(10px);
}
}
&:before {
position: absolute;
content: '';
top: auto;
bottom: 0px;
left: 0px;
width: 100%;
height: 1px;
background: rgba(34, 36, 38, 0.1);
}
}
}
input[type=checkbox]:checked ~ .items {
display: block;
}
}
}
.menu-container {
&:not(.vertical) .item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
&:after {
content: '';
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
&:first-child {
margin-top: 0rem;
}
&:last-child {
margin-bottom: 0rem;
}
}