I want to achieve a vertically centered mobile menu in WordPress that looks something like this:
Currently I added the following css code to my theme:
.wp-block-navigation__responsive-container-close {
position: absolute;
top: var(--wp--preset--spacing--16);
right: var(--wp--preset--spacing--32);
padding: var(--wp--preset--spacing--24);
}
.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-
block-navigation__responsive-container-content {
height: 100%
}
.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-
content .wp-block-navigation__container {
justify-content: center;
gap: 2rem;
}
.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
height: calc(100% - 46px);
}
This seems a little weird imo. Is there a better way to achieve what I did?
Link to website:
