[Resolved] Center and increase size of Menu icon on mobile

[Barbara]

Hi,

How can I center the menu icon on the mobile version and if possible make it a bit bigger? Screenshot:
https://screencast.com/t/UtstQYFm

Thanks!

[Leo]

Hi there,

Can you try turning off the mobile header option first?
https://docs.generatepress.com/article/mobile-header/

Then the toggle should be centered by default.

Let me know if this helps 🙂

[Barbara]

Hi Leo,

It looks centered on WP/GP customisation demo but a bit to the right on my phone. I noticed Menu Item Width changes this (moves it more to the left or right) but it looks differently depending on the screen size and it’s not always centered. Is there a way to make it centered regardless of different phone screen sizes?

Also, since I turned the Mobile Header off, the menu breaks in a strange way now when I reduce browser window, so I would either need a CSS for this or a solution to center the Menu icon with Mobile Header off (now it’s off and it’s not always centered anyway).

Also, is it possible to make the icon a bit bigger or would this be too complicated?

Thanks!

[Leo]

Do you mind doing this first?
https://www.screencast.com/t/sAZU8h7bUcE

Let me know 🙂

[Barbara]

I deactivated the plugin, still the same problem. I think I set the plugin I have to clear all cache after every change/update and I always check results and changes in private browsing mode.

[Leo]

Deactivating the plugin makes it easier for us to look for the solution which is why we always ask for it.

Try this CSS:

@media (max-width: 768px) {
    .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
        float: none;
        display: block;
        margin: auto;
        font-size: 20px;
    }
}

Let me know 🙂

[Barbara]

Thanks Leo, centering and size modifications work great now, can you just tell me how to fix the “breaking” problem as well?
I tried increasing max-width in CSS but now it does an even stranger thing than before; the original menu stays and moves lower on the page, plus it also shows the mobile menu icon. Here’s the screenshot:
https://screencast.com/t/WduedF77pNc

[Tom]

The mobile menu is set to display at 768px, which makes the desktop menu disappear. You’ve changed the CSS Leo provided to kick in at 950px, which shows the menu toggle before the desktop menu goes away.

[Barbara]

Yes, I changed it because I wanted the mobile menu to show up “earlier” when reducing window size because when it’s at its default setting (768px), the desktop menu is broken at some stage. Here’s an example of how it looks when it’s set to default (768px):
https://screencast.com/t/13nQCeKkj
When I had Mobile Header on and without most recent CSS, I could set it to 950px and it was showing up ok – the desktop menu wasn’t broken and disappeared when the mobile menu showed up. Now when it’s at 768px it’s broken at some stage.

[Leo]

Yeah the custom breakpoint is currently for mobile header only.

We’ve made the same option work without mobile header in the next version of the free theme which is currently in beta test:
https://generatepress.com/generatepress-2-3/

Any chance you can give it a go?

Let me know 🙂

[Barbara]

I tried to install it but I get the following message:
“Destination folder already exists. /home/sunriseadventure/public_html/wp-content/themes/generatepress/

Theme installation failed.”

If I install it, will everything still look the same? I’m a bit afraid it would mess up my site.

I can wait for the regular update if there’s no other solution. I can live with that menu being broken at a certain width for awhile.

Thanks for your help!

[Leo]

You will need to delete the existing theme and re-install the new file.

All your settings will be saved (unless you’ve modified the theme’s core file which I don’t think you have).

The official version should be out soon 🙂

[Barbara]

Ok, thanks Leo!

[Leo]

No problem 🙂

[Author]

Posts