mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2025-06-26 17:00:46 +00:00
fixed header, right navbar and responsive
This commit is contained in:
61
app/assets/scss/modules/_primary-nav.scss
Normal file
61
app/assets/scss/modules/_primary-nav.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
50
app/assets/scss/modules/_site-header.scss
Normal file
50
app/assets/scss/modules/_site-header.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
12
app/assets/scss/modules/_wrapper.scss
Normal file
12
app/assets/scss/modules/_wrapper.scss
Normal 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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user