123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- // Updates the Mobile Navigation to be next to the site title.
- @include media(mobile-only) {
- .mobile-nav-side {
- .has-menu {
- &:before,
- &:after {
- content: none;
- }
- position: relative;
- display: grid;
- grid-gap: 2px;
- grid-template-areas:
- "site-logo site-logo"
- "social-navigation main-navigation";
- &.has-title-and-tagline {
- grid-template-areas:
- "site-logo site-logo"
- "site-title main-navigation"
- "site-description main-navigation"
- "social-navigation social-navigation";
- .site-title {
- grid-area: site-title;
- align-self: end;
- }
- .site-description {
- grid-area: site-description;
- align-self: start;
- }
- }
- & > *:not(.site-logo) {
- margin: 0;
- }
- .site-logo {
- grid-area: site-logo;
- justify-self: center;
- margin: $baseline-unit 0;
- }
- .social-navigation {
- grid-area: social-navigation;
- align-self: center;
- }
- .main-navigation {
- grid-area: main-navigation;
- //align-self: center;
- }
- }
- .site-header #site-navigation.main-navigation {
- display: grid;
- grid-template-areas:
- "menu-toggle cart-toggle"
- "dropdown-menu dropdown-menu";
- margin: 0;
- justify-self: end;
- //text-align: right;
- #toggle-menu {
- grid-area: menu-toggle;
- }
- #toggle-cart[for="woocommerce-toggle"] {
- grid-area: cart-toggle;
- }
- #toggle-cart[for="woocommerce-toggle"].button,
- #toggle-menu {
- padding: (1.5 * $baseline-unit);
- display: inline-block;
- text-align: center;
- justify-self: end;
- font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
- }
- #toggle-cart[for="woocommerce-toggle"] {
- margin-top: $baseline-unit;
- }
- #toggle-cart[for="woocommerce-toggle"].button svg {
- margin-top: -2px;
- }
- .main-menu-container {
- grid-area: dropdown-menu;
- margin-top: $baseline-unit;
- position: absolute;
- z-index: 100;
- right: 2 * $baseline-unit;
- left: 2 * $baseline-unit;
- background: #{map-deep-get($config-global, "color", "background", "light") };
- padding: 0 (2 * $baseline-unit) $baseline-unit;
- border: 1px solid #{map-deep-get( $config-global,"color","border","default")};
- border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
- text-align: left;
- }
- .main-menu-container {
- a {
- padding: $baseline-unit 0;
- line-height: 1;
- }
- }
- .woocommerce-menu-container {
- text-align: left;
- position: absolute;
- right: 2 * $baseline-unit;
- left: 2 * $baseline-unit;
- width: calc(100% - 32px);
- margin-top: 6 * $baseline-unit;
- border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
- }
- }
- }
- }
|