Mobile Menu not responsive – Anemone Theme

  • Unknown's avatar
    wolskimariedesign · Member ·

    Hi there,

    I’ve done everything from deactivating plugins and removing custom CSS and nothing seems to be working, can someone please help – the mobile menu isn’t responsive. When you click on it nothing happens.

    Site is kimvano.com

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

  • Unknown's avatar
    dkmyta · Member ·

    Hey there!

    I spent sometime looking into your issue by inspecting your website and comparing my finding to the Anemone demo site on WordPress.com here: https://anemonedemo.wordpress.com/

    It seems to me that there should be a div with a class called “site-primary-menu-responsive” that contains your responsive menu and sits just out of view to the left, and that when the “Menu” button is toggled this div pops in to view. This is true on the demo site but for some reason it looks as though this div does not exist on your website. Since the div does not exist when the menu is toggled there is nothing for menu to pull into view.

    Being just another member I can only see so much from an outside point of view but that seems to a point worth mentioning, I see modlook is tagged so staff will be in touch to take a deeper look into what might be causing this issue for you.

    Hope your issue gets resolved soon!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @wolskimariedesign, this took a bit if time to figure out and I had to get one of our theme developers involved. It appears that the Elementor page builder plugin is loading a file that is also loaded by the theme, and this causing the issue.

    I am filing a bug report on this, but in the meantime, the only way to fix this issue is to disable the Elementor plugin. If you have not yet started to utilize that plugin, you can temporarily disable it till the theme update is done. If you have used it, then I’m not sure what to suggest. I could give you some CSS to hide the menu toggle and make the normal menu show all the time.

    Let me know what you think.

  • Unknown's avatar
    thesacredpath · Member ·

    I went ahead and worked out the CSS, which is below. On smaller phones, the menu overlapped part of the top of the featured image, so the last CSS rule in the media query below is to adjust the image position. This following CSS can be removed once the theme is updated. 

    /*Show full menu due to conflict with elementor - bug*/
@media screen and (max-width: 767px) {
  .toggle-menu-wrapper {
    display: none !important;
  }
  .site-primary-menu {
    display: block;
  }
  .site-primary-menu li a {
    padding: 8px;
  }
  .site-hero.site-hero-featured-image {
    background-position-y: 40px;
  }
}
  • Unknown's avatar
    thesacredpath · Member ·

    Actually I came up with a better workaround for you for now. Got to Customize > Theme Options and disable the sticky menu until the bug is fixed.

  • Unknown's avatar
    wolskimariedesign · Member ·

    Thank you sooo much!! Yes I thought it was Elementor causing the issue… I didn’t disable it as I was scared of losing my work!

    But that simple task of disabling the sticky menu was spot on! Works a treat now thank you!!

    Glad I asked for help as I was almost losing my mind over it haha

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome.

  • laurelfulford · Staff ·

    Hi @wolskimariedesign!

    I’m just following up on the above issue — I wanted to let you know that the Anemone theme has been updated, so the sticky menu will no longer clash with Elementor. You’re free to re-enable if you wish!

  • The topic ‘Mobile Menu not responsive – Anemone Theme’ is closed to new replies.