make mobile menu somewhat bearable
This commit is contained in:
parent
47cd67cc5b
commit
6e317b2a78
29
style.css
29
style.css
@ -6,13 +6,36 @@ Description: Modern block theme for CMT Engineering
|
|||||||
Version: 0.1
|
Version: 0.1
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.wp-block-navigation .wp-block-navigation-item.current_page_item {
|
/* highlight current/hovered page nav item */
|
||||||
padding: 1em;
|
@media screen and (min-width: 786px) {
|
||||||
background-color: var(--wp--preset--color--secondary);
|
.wp-block-navigation .wp-block-navigation-item {
|
||||||
|
padding-block: 1em;
|
||||||
|
padding-inline: .75em
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-block-navigation .wp-block-navigation-item.current_page_item,
|
||||||
|
.wp-block-navigation .wp-block-navigation-item:hover,
|
||||||
|
.wp-block-navigation .wp-block-navigation-item:active,
|
||||||
|
.wp-block-navigation .wp-block-navigation-item:focus-visible {
|
||||||
|
background: var(--wp--preset--color--secondary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 786px) {
|
@media screen and (max-width: 786px) {
|
||||||
.hide-on-mobile {
|
.hide-on-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* attempt to fix mobile menu */
|
||||||
|
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ ul.wp-block-navigation__submenu-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
|
||||||
|
font-size: 22px !important;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-inline: 1em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user