Optimized header for small viewports
This commit is contained in:
parent
e2addb919f
commit
96882aef12
@ -3,14 +3,37 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 70px;
|
||||
|
||||
height: 60px;
|
||||
|
||||
&__Logo {
|
||||
max-width: 300px;
|
||||
width: 35%;
|
||||
object-fit:contain;
|
||||
height: 60px;
|
||||
margin: 25px;
|
||||
object-fit:cover;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.LP-Image{
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-medium){
|
||||
.LP-Header__Logo{
|
||||
width: 60px;
|
||||
.LP-Image{
|
||||
object-position: 0 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-extra-small){
|
||||
.LP-Header__Logo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.LP-Header__Logo{
|
||||
margin: 25px;
|
||||
.LP-Header__Navigation{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
<header class="LP-Header">
|
||||
<div class="LP-Header__Logo">
|
||||
{{render '@logo'}}
|
||||
{{> @image source='/images/logo.png'}}
|
||||
</div>
|
||||
<div class="LP-Header__Navigation">
|
||||
{{> @navigation}}
|
||||
|
Loading…
Reference in New Issue
Block a user