Archived topic
Change justification for mobile menu
5 replies · Started by Terry on October 19, 2022
I see a toggle for menu justification on the navbar gutenberg navbar block, and I've set it for center, but I want justification left for the mobile dropdown. How can I change just the mobile version formatting? Also, the hamburger menu shows 2 bars instead of the normal 3-how can I fix that? The site is: https://comingtogethervirginia.org
Hi Terry,
You are using the navigation block which is a WP core block, unfortunately, GP has no control over it.
However, you can try this CSS to align the text to left:
@media (max-width: 767px) {
ul.wp-block-navigation__container li {
align-items: flex-start !important;
text-align: left;
}
}Almost. Not all of the main items are shifted left-see screenshot.
https://drive.google.com/file/d/10MV2e1gvVmUkJM6EDrmYXgj_7pMwDfVx/view?usp=sharing
Try add this CSS as well:
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
align-items: flex-start !important;
}You're a genius-perfect. Thanks so much. What about my question on the mobil menu icon-why is it 2 stripes instead of 3? Can I change it?
We can not control the icon, it's not a simple request can be solved by CSS.
You will need to reach out to WP's support for this to see if they have a built-in filter to replace the icon.
