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

Use CSS grid to align the menu

Browse source
This commit is contained in:
Ben Dwyer 2020-12-09 21:03:34 +00:00 committed by Maggie Cabrera
parent 657657bc5f
commit e442731fac
3 changed files with 107 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
barnsbury/sass/_extra-child-theme.scss
View file

@ -47,6 +47,45 @@ a {
}
}
// Grid definitions
.site-logo {
grid-area: site-logo;
}
.site-title {
grid-area: site-title;
}
.site-description {
grid-area: site-description;
}
.main-navigation {
grid-area: main-navigation;
}
.social-navigation {
grid-area: social-navigation;
}
@include media(mobile-only) {
.mobile-nav-side .site-header {
align-items: start;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-column-gap: $spacing_unit;
grid-template-areas:
"site-logo site-logo"
"site-title main-navigation"
"site-description main-navigation";
.site-description {
// TODO - align with the grid above
}
.main-navigation {
text-align: right;
}
}
}
/**
* CSS-grid Desktop Menu
*/
@ -78,17 +117,14 @@ a {
"site-logo main-navigation"
"site-logo social-navigation";
}
}
.site-logo {
grid-area: site-logo;
margin-bottom: $spacing_unit;
}
.site-title {
align-self: flex-end;
grid-area: site-title;
& + .site-description {
margin-top: 0;
@ -97,12 +133,10 @@ a {
.site-description {
align-self: center;
grid-area: site-description;
}
.main-navigation {
align-self: center;
grid-area: main-navigation;
justify-self: flex-end;
& > div > ul {
@ -164,7 +198,6 @@ a {
.social-navigation {
align-self: center;
grid-area: social-navigation;
justify-self: flex-end;
}
}
@ -393,6 +426,3 @@ a {
margin-top: $spacing_unit;
}
}
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 100px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";

68
barnsbury/style-rtl.css
View file

@ -4027,6 +4027,40 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
transform: translateZ(0);
}
.site-logo {
grid-area: site-logo;
}
.site-title {
grid-area: site-title;
}
.site-description {
grid-area: site-description;
}
.main-navigation {
grid-area: main-navigation;
}
.social-navigation {
grid-area: social-navigation;
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-header {
align-items: start;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-column-gap: 16px;
grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description main-navigation";
}
.mobile-nav-side .site-header .main-navigation {
text-align: left;
}
}
/**
* CSS-grid Desktop Menu
*/
@ -4051,23 +4085,19 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
}
.site-logo {
grid-area: site-logo;
margin-bottom: 16px;
}
.site-title {
align-self: flex-end;
grid-area: site-title;
}
.site-title + .site-description {
margin-top: 0;
}
.site-description {
align-self: center;
grid-area: site-description;
}
.main-navigation {
align-self: center;
grid-area: main-navigation;
justify-self: flex-end;
}
.main-navigation > div > ul {
@ -4125,7 +4155,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
}
.social-navigation {
align-self: center;
grid-area: social-navigation;
justify-self: flex-end;
}
}
@ -4390,32 +4419,3 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
margin-top: 16px;
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 100px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
position: absolute;
top: 16px;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #FDF9EC;
margin: 0 -16px;
padding: 0 16px 8px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}
}

68
barnsbury/style.css
View file

@ -4056,6 +4056,40 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
transform: translateZ(0);
}
.site-logo {
grid-area: site-logo;
}
.site-title {
grid-area: site-title;
}
.site-description {
grid-area: site-description;
}
.main-navigation {
grid-area: main-navigation;
}
.social-navigation {
grid-area: social-navigation;
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .site-header {
align-items: start;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-column-gap: 16px;
grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description main-navigation";
}
.mobile-nav-side .site-header .main-navigation {
text-align: right;
}
}
/**
* CSS-grid Desktop Menu
*/
@ -4080,23 +4114,19 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
}
.site-logo {
grid-area: site-logo;
margin-bottom: 16px;
}
.site-title {
align-self: flex-end;
grid-area: site-title;
}
.site-title + .site-description {
margin-top: 0;
}
.site-description {
align-self: center;
grid-area: site-description;
}
.main-navigation {
align-self: center;
grid-area: main-navigation;
justify-self: flex-end;
}
.main-navigation > div > ul {
@ -4154,7 +4184,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
}
.social-navigation {
align-self: center;
grid-area: social-navigation;
justify-self: flex-end;
}
}
@ -4419,32 +4448,3 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
margin-top: 16px;
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 100px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
position: absolute;
top: 16px;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #FDF9EC;
margin: 0 -16px;
padding: 0 16px 8px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}
}