Menu stopped working on mobile version

  • Unknown's avatar
    mayingfantasycreations · Member ·

    I’ve noticed that after a year, my menu doesn’t work anymore on the mobile version of my website.

    http://www.mayingsfantasycreations.com

    The color does change when you click on it. But the menu doesn’t fold out.

    I’m using the buttons 2 theme. And I have a premium account, so I can’t install or turn of any plug ins.

    Can someone help me?

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

  • staff-blorbo · Staff ·

    Hm, I’m not seeing this issue myself there.

    What type of phone are you browsing the site with?

  • Unknown's avatar
    mayingfantasycreations · Member ·

    Thank you for your reply. I’m using an iPhone.

  • staff-blorbo · Staff ·

    Which model of iPhone, and which version of iOS are you running?

  • Unknown's avatar
    mayingfantasycreations · Member ·

    I have an iPhone SE from 2020. With iOS 14.8.1.
    But I do hear from other people with different phones, that it also doesn’t work for them.

  • kokkieh · Staff ·

    Hi there,

    This appears to be a bug with the theme on your site. It has been reported to our developers, but I’m not able to tell you when it will be fixed.

    This only appears to happen if the site is set to use a static front page, so if you changed it to show your latest posts on the front page the menu button will work again on mobile. But I can understand if you didn’t want to do this.

    The other option is to add a Navigation Block directly to the front page’s content to display a menu instead. It won’t look the same, with the menu neatly hidden behind a button, but at least people would be able to get to your other pages.

    https://wordpress.com/support/full-site-editing/theme-blocks/navigation-block/

    We can then even use custom CSS code to hide the broken menu button on the front page, so there’s not two menus on the page. This should do the trick:

    /* Hide menu button on front page only in mobile view */
@media only screen and (max-width: 40.063em) {
	.home nav#site-navigation.main-navigation {
		display: none;
	}
}

    These would be temporary measures – once the bug is fixed, you can remove the CSS code and navigation block again.

  • The topic ‘Menu stopped working on mobile version’ is closed to new replies.