[Support request] How to Align Mobile Drop Down Menu

[Amit]

In the mobile view on my site thevacuumbuddy.com, the items are displayed to the extreme left. How can they be displayed to look better?

[Garth Dryland]

You could try this

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

[Amit]

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

[Garth Dryland]

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

[Amit]

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

[Leo]

Thanks Garth!

[Amit]

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

[Leo]

Try this instead:

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

[Amit]

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.

[Leo]

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

[Amit]

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

[Amit]

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

[David]

Hi there,

is this on the vacuumbuddy site?

[Amit]

Nope, now on friedcoffee.com

[David]

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.

[Author]

Posts