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

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

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

3
rivington/functions.php
View file

@ -111,6 +111,9 @@ if ( ! function_exists( 'rivington_setup' ) ) :
// Remove footer menu // Remove footer menu
unregister_nav_menu( 'menu-2' ); unregister_nav_menu( 'menu-2' );
// Add mobile-on-side body class.
add_filter( 'body_class', 'varia_mobile_nav_on_side' );
} }
endif; endif;
add_action( 'after_setup_theme', 'rivington_setup', 12 ); add_action( 'after_setup_theme', 'rivington_setup', 12 );

31
rivington/sass/_extra-child-theme.scss
View file

@ -457,3 +457,34 @@ a {
justify-content: center; justify-content: center;
} }
} }
// 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; /* This is rivington 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;
}
}
}
}

29
rivington/style-rtl.css
View file

@ -4423,3 +4423,32 @@ p:not(.site-title) a:hover {
justify-content: center; justify-content: center;
} }
} }
@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;
/* This is rivington specific */
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #0d1f55;
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;
}
}

29
rivington/style.css
View file

@ -4452,3 +4452,32 @@ p:not(.site-title) a:hover {
justify-content: center; justify-content: center;
} }
} }
@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;
/* This is rivington specific */
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #0d1f55;
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;
}
}