Navigation menu not showing on mobile

  • Unknown's avatar
    undersleeping · Member ·

    Hi, the navigation menu for my website, thewolfpractice.net, doesn’t show any longer on mobile. It does on desktop though. I’m running a blank template, hence some functionalities are limited: by example, I don’t see any ‘menu’ item under appearance. Can anybody please help? It’s fairly urgent! Thanks

    The blog I need help with is: (visible only to logged in users)

  • staff-zinnia · Staff ·

    Hey there –

    Thanks for reaching out. I’ll be happy to work on this together. When using the navigation block you’ll need to configure the mobile setting options.

    WP
    Blocks (The Full List) » Navigation Block
    in WordPress.com Support
    4 min read
    The Navigation block displays a menu of links to help your visitors navigate around your website. This guide will show you how to use it. Add a Navigation Block To add the Navigation block, click on the + Block Inserter icon and search for “navigation”. Click to add the block to the post or page. 💡 Using your keyboard, you can also type /navigation on a new line and press ent

    Let me know if that makes a difference.

  • Unknown's avatar
    undersleeping · Member ·

    Unfortunately, it doesn’t. I tried all possible combinations in the navigation settings… yet, it still doesn’t show. I also trying clearing my mobile history, as well as navigating in private mode, but it doesn’t seem to show nonetheless. Can you see the navigation menu yourself when accessing?

    Any suggestions how to go about it?

  • aleone89 · Staff ·

    Hey there,

    It looks like this CSS is applying that colour of the overlay menu: 

    button, .button, input, select, textarea, .wp-block-button, .wp-block-button__link {
    font-family: clear-sans-medium !important;
    color: #0f1e42 !important;
}

    Do you remember adding this into the site at any point? The reason why I ask is because I don’t see this CSS in the additional CSS panel in the customizer.

    Do you also remember applying this colour to the buttons.

    Many thanks in advance!

  • Unknown's avatar
    undersleeping · Member ·

    Thank you so much for your answer!

    I checked again the mobile version and noticed that, indeed, the navigation button is there, just it merges into the top as, I suppose, it must have the same colour. So basically if I tap where it is supposed to be, it actually opens up the navigation menu. I checked the additional CSS myself but couldn’t find anything at all, except for a piece of code that was meant for something else but never worked :P

    So I removed that useless CSS, but still that didn’t resolve the issue, since effectively you still cannot see the navigation button (though it’s actually there).

    Yes, I’ve definitely used that colour as the main theme to the site, though the buttons background colour is different, namely 8FAADC, and in any case I don’t remember doing that through CSS, I used the site editor only.

    Any piece of advice how to fix this?

    Thanks again!

  • aleone89 · Staff ·

    Hey there,

    So I’ve triple checked the settings being applied and from what I can gather there’s no reason why they shouldn’t apply to the colours set – which is odd, and this points to a plugin conflict with the theme (most likely from Elementor, but to be confirmed ultimately).

    I’ve gone ahead and added this CSS via Appearance > Customizer > Additional CSS: 

    /* Fix menu icon mob AL FR */

.wp-block-navigation__responsive-container-open svg {
	fill: #abb8c3;
}

span.wp-block-navigation-item__label {
    color: #abb8c3;
}

    This should have fix the colour issues we’ve faced here.

    Are you able to confirm you’re able to see that working from your end?

    Many thanks in advance!

  • Unknown's avatar
    undersleeping · Member ·

    That’s amazing, thank you so much for pushing the fix code over… it works now!

    Thank you once again for all the support!

    Mirko

  • The topic ‘Navigation menu not showing on mobile’ is closed to new replies.