css - Responsive Menu: Center vertically

admin2025-01-07  5

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:

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1736256627a376.html

最新回复(0)