Varia: Fix padding issues in menu on mobile screens
This commit is contained in:
parent
ef1115ec11
commit
13ef3ffe4b
3 changed files with 48 additions and 27 deletions
|
@ -99,17 +99,19 @@
|
|||
|
||||
& > li {
|
||||
|
||||
&:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
& > a {
|
||||
@include crop-text(map-deep-get($config-header, "main-nav", "font", "line-height"));
|
||||
}
|
||||
|
||||
@include media(mobile) {
|
||||
&:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Sub-menus Flyout */
|
||||
|
@ -142,7 +144,11 @@
|
|||
font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
|
||||
font-size: #{map-deep-get($config-header, "main-nav", "font", "size")};
|
||||
font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
|
||||
padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
|
||||
padding: #{map-deep-get($config-header, "main-nav", "link-padding")} 0;
|
||||
|
||||
@include media(mobile) {
|
||||
padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
|
||||
}
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
|
|
|
@ -2363,14 +2363,6 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li:first-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li:last-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li > a {
|
||||
line-height: 1;
|
||||
}
|
||||
|
@ -2390,6 +2382,15 @@ table th,
|
|||
margin-top: -0.11em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 560px) {
|
||||
.main-navigation > div > ul > li:first-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
.main-navigation > div > ul > li:last-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li > .sub-menu {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
@ -2419,7 +2420,14 @@ table th,
|
|||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
padding: 16px;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 560px) {
|
||||
.main-navigation a {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation a:link, .main-navigation a:visited {
|
||||
|
|
|
@ -2381,14 +2381,6 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li:last-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li > a {
|
||||
line-height: 1;
|
||||
}
|
||||
|
@ -2408,6 +2400,15 @@ table th,
|
|||
margin-top: -0.11em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 560px) {
|
||||
.main-navigation > div > ul > li:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
.main-navigation > div > ul > li:last-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation > div > ul > li > .sub-menu {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
@ -2437,7 +2438,13 @@ table th,
|
|||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
padding: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 560px) {
|
||||
.main-navigation a {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation a:link, .main-navigation a:visited {
|
||||
|
|
Loading…
Reference in a new issue