autonomic-cooperative/autonomic-block-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nav-menu: improve mobile screen styling
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
desmukh 2023-08-08 18:40:58 +05:00
parent 628c393fa1
commit 910889fb41
2 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
parts/nav-menu.html
View File

@ -1,11 +1,11 @@
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"30%"},"blockGap":"0"}},"layout":{"type":"constrained"}} --> <!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"className":"nav-menu","layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:30%"> <div class="wp-block-group nav-menu">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"88px","left":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} --> <!-- wp:group {"className":"logo-wrapper","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:88px;padding-left:0"> <div class="wp-block-group logo-wrapper">
<!-- wp:image {"id":411,"width":64,"sizeSlug":"full","linkDestination":"none"} --> <!-- wp:image {"id":411,"width":64,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img <figure class="wp-block-image size-full is-resized"><img
src="https://autonomic.zone/wp-content/uploads/2023/05/monsterpink.png" alt="" class="wp-image-411" src="https://autonomic.zone/wp-content/uploads/2023/05/monsterpink.png" alt="" class="wp-image-411"
width="64" /></figure> style="width:64px" width="64" /></figure>
<!-- /wp:image --> <!-- /wp:image -->
</div> </div>
<!-- /wp:group --> <!-- /wp:group -->

58
style.css
View File

@ -92,3 +92,61 @@ html, body {
.wp-site-blocks .footer { .wp-site-blocks .footer {
height: 100%; height: 100%;
} }
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-wrapper {
width: 32px;
}
.wp-site-blocks .wp-block-group:nth-child(1) .nav-menu {
padding-top: 0 !important;
}
.wp-site-blocks .wp-block-group:nth-child(1) .logo-wrapper {
padding-top: 0 !important;
}
@media screen and (max-width: 782px){
.nav-menu {
padding-left: 1rem;
padding-right: 1rem;
}
.wp-site-blocks .wp-block-group:nth-child(1) {
padding-top: 24px !important;
}
}
@media screen and (min-width: 600px){
.nav-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
.nav-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: inherit;
}
}
@media screen and (min-width: 782px){
.nav-menu {
display: block;
padding-right: 30%;
}
.nav-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: block;
}
.nav-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none;
}
.logo-wrapper {
padding-bottom: 88px;
width: inherit;
}
}