make menu a bit more responsive

This commit is contained in:
meaz 2019-10-24 18:57:24 +02:00
parent aba8408bc7
commit 0e21e2672c
2 changed files with 26 additions and 25 deletions

View File

@ -5,23 +5,9 @@ Disroot Media Queries
------------------------------------*/
/* screenwidth less than 1024px
/* screenwidth less than 1000px
------------------------------------*/
@media only screen and (max-width: 1024px) {
/* header styles
------------------------------------*/
header .banner-text h1 {
font: 80px/1.1em 'opensans-bold', sans-serif;
letter-spacing: -1px;
margin: 0 auto 12px auto;
}
}
/* screenwidth less than 900px
------------------------------------*/
@media only screen and (max-width: 900px) {
@media only screen and (max-width: 1150px) {
/* header styles
------------------------------------*/
@ -29,6 +15,8 @@ Disroot Media Queries
header .banner-text h1 {
font: 78px/1.1em 'opensans-bold', sans-serif;
letter-spacing: -1px;
margin: 0 auto 12px auto;
}
header .banner-text h3 {
font: 17px/1.9em 'librebaskerville-regular', serif;
@ -47,8 +35,8 @@ Disroot Media Queries
}
#nav-wrap {
font: 11px 'opensans-bold', sans-serif;
letter-spacing: 1.5px;
font: 10px 'opensans-bold', sans-serif;
letter-spacing: 1px;
}
.dropdown-content {
display: none;
@ -58,6 +46,18 @@ Disroot Media Queries
display: none;
}
ul#nav li:first-child {
margin-right: 1%;
}
ul#nav li:nth-last-child(2) {
margin-left: 1%;
}
ul#nav li a {
padding: 8px 4px;
}
/* Contact Section
------------------------------------*/
#contact .section-head { margin-bottom: 30px; }

View File

@ -216,7 +216,8 @@ header .scrolldown a:hover { color: #50162D; }
top: 0px;
display: flex;
align-items: center;
justify-content: center
justify-content: center;
}
.opaque { background-color: #50162D; }
@ -243,20 +244,20 @@ ul#nav li {
display: inline-block;
list-style: none;
height: 48px;
width: 100%;
}
/* separate top right icons from the rest of the menu */
ul#nav li:first-child {
margin-right: 50px;
margin-right: 4%;
}
ul#nav li:nth-last-child(2) {
margin-left: 50px;
margin-left: 4%;
}
/* separate top right icons from the rest of the menu */
li#icons {
margin-left: 40px;
}
ul#nav li ul{
position: absolute;