[Support request] Change justification for mobile menu

[Terry]

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

[Ying]

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;
    }
}

[Terry]

Almost. Not all of the main items are shifted left-see screenshot.
https://drive.google.com/file/d/10MV2e1gvVmUkJM6EDrmYXgj_7pMwDfVx/view?usp=sharing

[Ying]

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;
}

[Terry]

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?

[Ying]

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.

[Author]

Posts