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

Home Forums Support Center and increase size of Menu icon on mobile

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #923604
    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!

    #923606
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #923614
    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!

    #923615
    Leo
    Staff
    Customer Support

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

    Let me know πŸ™‚

    #923623
    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.

    #923636
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #923855
    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

    #924087
    Tom
    Lead Developer
    Lead Developer

    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.

    #924172
    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.

    #924181
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #924204
    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!

    #924234
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #924238
    Barbara

    Ok, thanks Leo!

    #924240
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.