beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the Mayland theme to have the mobile nav on the side.

Browse source
This commit is contained in:
Enej Bajgoric 2020-12-04 14:44:11 -08:00 committed by Maggie Cabrera
parent f5e510dc75
commit 309f333133
4 changed files with 112 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
mayland/functions.php
View file

@ -102,6 +102,9 @@ if ( ! function_exists( 'mayland_setup' ) ) :
),
)
);
// Add mobile-on-side body class.
add_filter( 'body_class', 'varia_mobile_nav_on_side' );
}
endif;
add_action( 'after_setup_theme', 'mayland_setup', 12 );

37
mayland/sass/_extra-child-theme.scss
View file

@ -309,3 +309,40 @@ a {
font-family: inherit;
font-family: var( --font-base, inherit );
}
// Updates the Mobile Navigation to be next to the site title.
.mobile-nav-side .site-title,
.mobile-nav-side .site-description {
@include media(mobile-only) {
margin-right: 90px; /** This number is magic. */
}
}
/* This is also mayland specific */
.mobile-nav-side .site-title {
@include media(mobile-only) {
margin-bottom: 2 * $baseline-unit;
}
}
.mobile-nav-side .main-navigation {
@include media(mobile-only) {
#toggle-menu {
position: absolute;
top: $baseline-unit; /* This is mayland specific */
right: 2 * $baseline-unit;
}
.menu-main-menu-container {
background: #{map-deep-get($config-global, "color", "background", "light") };
margin:0 ( -2 * $baseline-unit );
padding: 0 (2 * $baseline-unit) $baseline-unit;
.sub-menu {
padding-left: 2 * $baseline-unit;
}
a {
padding: $baseline-unit 0;
line-height: 1;
}
}
}
}

36
mayland/style-rtl.css
View file

@ -4296,3 +4296,39 @@ strong {
font-family: inherit;
font-family: var(--font-base, inherit);
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-title,
.mobile-nav-side .site-description {
margin-left: 90px;
/** This number is magic. */
}
}
/* This is also mayland specific */
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-title {
margin-bottom: 16px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
position: absolute;
top: 8px;
/* This is mayland specific */
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #f2f2f2;
margin: 0 -16px;
padding: 0 16px 8px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}
}

36
mayland/style.css
View file

@ -4325,3 +4325,39 @@ strong {
font-family: inherit;
font-family: var(--font-base, inherit);
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-title,
.mobile-nav-side .site-description {
margin-right: 90px;
/** This number is magic. */
}
}
/* This is also mayland specific */
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-title {
margin-bottom: 16px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
position: absolute;
top: 8px;
/* This is mayland specific */
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #f2f2f2;
margin: 0 -16px;
padding: 0 16px 8px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}
}