How to Align Mobile Drop Down Menu

You could try this

/*
Centralize the mobile-header menu items
*/
@media (max-width: 768px) {
    .main-navigation .main-nav li {
        text-align: center !important;
    }
}

That worked like charm. One more thing I feel should improve is the space between search icon and menu button as they seem closer.

Maybe try the menu item width setting in customize / layout / primary navigation

Thanks for the quickie. Got the thing. GP is really an awesome theme and I am coming up great pagespeed scores on this website...

Thanks Garth!

After the update to new theme and premium plugin, this code is not working! What's the catch?

Try this instead:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        text-align: center !important;
        background-color: #ffffff;
    }
}

Did the work Leo. Another thing that I am facing is the drop down menu background issue in transparent navigation. The menu items are overlapping the content which looks weird. Any solution to that please? Here I am talking about the fixed navigation and not sticky as my sticky navigation is of different color.

Edited the code here: https://generatepress.com/forums/topic/how-to-align-mobile-drop-down-menu/#post-367991

This code is not working now, the menu is left aligned....

I guess the new version of theme is not valid for this code.

Hi there,

is this on the vacuumbuddy site?

Nope, now on friedcoffee.com

Ok we can keep it on that topic and i will have a look. Chances are its a caching issue as i did not see that when working on the mobile header. Try clearing browser caches.