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

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

Browse source
This commit is contained in:
Enej Bajgoric 2020-12-04 15:15:35 -08:00 committed by Maggie Cabrera
parent 068e10dc9a
commit 863aab88f5
4 changed files with 103 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
dalston/functions.php
View file

@ -119,6 +119,9 @@ if ( ! function_exists( 'dalston_setup' ) ) :
'header-text' => array( 'site-title' ),
)
);
// Add mobile-on-side body class.
add_filter( 'body_class', 'varia_mobile_nav_on_side' );
}
endif;
add_action( 'after_setup_theme', 'dalston_setup', 12 );

36
dalston/sass/_extra-child-theme.scss
View file

@ -317,3 +317,39 @@ a {
.footer-navigation .footer-menu a {
font-size: map-deep-get($config-global, "font", "size", "xs");
}
// 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. */
}
}
.mobile-nav-side .main-navigation {
@include media(mobile-only) {
#toggle-menu {
position: absolute;
top: $baseline-unit;
right: 2 * $baseline-unit;
}
.dropdown-icon {
/* This is fixed the issue whent the button changes sizes */
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
}
.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;
}
}
}
}

32
dalston/style-rtl.css
View file

@ -4267,3 +4267,35 @@ a {
.footer-navigation .footer-menu a {
font-size: 0.75614rem;
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-title,
.mobile-nav-side .site-description {
margin-left: 90px;
/** This number is magic. */
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
position: absolute;
top: 8px;
left: 16px;
}
.mobile-nav-side .main-navigation .dropdown-icon {
/* This is fixed the issue whent the button changes sizes */
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #FAFAFA;
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;
}
}

32
dalston/style.css
View file

@ -4296,3 +4296,35 @@ a {
.footer-navigation .footer-menu a {
font-size: 0.75614rem;
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-title,
.mobile-nav-side .site-description {
margin-right: 90px;
/** This number is magic. */
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
position: absolute;
top: 8px;
right: 16px;
}
.mobile-nav-side .main-navigation .dropdown-icon {
/* This is fixed the issue whent the button changes sizes */
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #FAFAFA;
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;
}
}