Finalized responsive navigation menu
This commit is contained in:
parent
98d1bd5538
commit
686611a04c
1 changed files with 42 additions and 6 deletions
|
@ -120,6 +120,7 @@ main section {
|
|||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
main section:nth-child(even) {
|
||||
|
@ -132,10 +133,20 @@ main section .title {
|
|||
padding: 1em 0;
|
||||
}
|
||||
|
||||
main section .left,
|
||||
main section .right {
|
||||
width: calc(50% - 2em);
|
||||
padding: 1em;
|
||||
@media screen and (max-width: 799px) {
|
||||
main section .left,
|
||||
main section .right {
|
||||
width: calc(100% - 2em);
|
||||
padding: .5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
main section .left,
|
||||
main section .right {
|
||||
width: calc(50% - 2em);
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
main section img {
|
||||
|
@ -158,11 +169,36 @@ main section img {
|
|||
#mobile-menu.visible {
|
||||
width: 10em;
|
||||
height: calc(100% - .1em);
|
||||
position: absolute;
|
||||
top: .1em;
|
||||
position: fixed;
|
||||
top: 2.75em;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
box-shadow: 0 3px 3px 3px #bbb;
|
||||
}
|
||||
|
||||
#mobile-menu .item {
|
||||
height: 2.5em;
|
||||
display: flex;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300;
|
||||
box-shadow: 2px 2px 1px -1px #bbb;
|
||||
}
|
||||
|
||||
#mobile-menu .item:hover {
|
||||
background: #d8ffe8;
|
||||
}
|
||||
|
||||
#mobile-menu .item a {
|
||||
width: calc(100% - 1em);
|
||||
height: calc(100% - 1em);
|
||||
padding: .5em;
|
||||
color: initial;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#mobile-menu .item a:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue