fixed header, right navbar and responsive

This commit is contained in:
Tancre
2020-09-16 17:06:26 +02:00
parent 94840df1b8
commit 8a629f6015
10 changed files with 249 additions and 18 deletions

View File

@ -0,0 +1,61 @@
.primary-nav{
padding-top: 10px;
@include atMedium(){
padding-top: 0;
}
&--pull-right{
@include atMedium(){
float: right;
}
}
ul {
margin: 0;
padding: 0;
@include clearfix();
}
li{
list-style: none;
display: inline-block;
padding-right: 7px;
@include atMedium(){
float: left;
display: block;
padding-right: 20px;
}
}
li:last-child {
padding-right: 0;
@include atMedium(){
padding-right: 20px;
}
}
a{
color: #000;
font-weight: 300;
text-decoration: none;
display: block;
padding: 5px 8px;
font-size: .8rem;
background:rgba(blue, .5);
@include atMedium(){
background:transparent;
font-size: 1rem;
padding: 12px 0;
&.is-current-link {
color: #fabb69;
}
}
}
}

View File

@ -0,0 +1,50 @@
.site-header{
padding: 10px 0;
position: absolute;
width: 100%;
z-index: 2;
transition: background-color .3s ease-out;
@include atMedium(){
position: fixed;
background-color: #cdf691;
}
&__btn-container{
@include atMedium(){
float: right;
}
}
&__menu-content{
opacity: 0;
transform: scale(1.2);
transtion: all .3s ease-out;
position: relative;
z-index: -10;
padding-top: 90px;
text-align: center;
@include atMedium(){
opacity: 1;
z-index: 1;
padding-top: 0;
transform: scale(1);
}
}
&__logo{
position: absolute;
top: 0;
left: 50%;
transform-origin: 50% 0%;
transform: translateX(-50%) scale(.8);
transition: transform .3s ease-out;
@include atMedium(){
left: auto;
transform: translateX(0);
}
}
}

View File

@ -0,0 +1,12 @@
.wrapper{
overflow: hidden;
padding-left: 18px;
padding-right: 18px;
max-width: 1236px;
margin-left: auto;
margin-right: auto;
&--medium{
max-width: 976px;
}
}