Okay
  Public Ticket #2762192
Anchors in Navigation Menu Prevent Closing on Mobile Devices
Closed

Comments

  • lazybeaches started the conversation

    Hi, we're using the voicer theme for our new website. We're using it as a parallax site. The anchors in the navigation menu are preventing the mobile menu from closing. How do we fix it so the mobile menu closes upon making the selection?

    Kind Regards

  • lazybeaches replied

    In part of my solution process, I installed the Elementor plugin to add a navigation menu with anchors. It did not work. I deactivated the plugin and deleted, however now the backgrounds of sections of the homepage are no longer stretching across the page. Is there a code or css I can put in to fix this?

  •  58
    Olga replied

    Hello, 


    Please, explain more details about the menu: do you see something like this on the demo? What functionality do you mean?

    Regarding the composer plugins. Our theme uses WPBakery composer. All pages are created by using it shortocodes. There is no the Elementor plugin in our theme. So, it can be not compatible with it.

    Unfortunately, arrangement of the theme to be compatible with it requires specific programming skills, basic css/html skills. Our general support isn’t available to manage this.

    We can advise to restore the working site from your backup packages. Or just upload the full theme again. Or if it doesn’t help you can reset all changes by using the WPReset plugin and install the theme again.

     



    thanks!

  • lazybeaches replied

    an example of an in-page anchor link I set is for #showreels. In the menu, i have set the link to bavosounds.com/#showreels. 

    I have also changed it to simply /#showreels in an attempt to get the mobile menu to close when using the mobile menu on a mobile device. 

    Other in-page anchor links I used in the menu are #bavoservices, #bavorates, and #contactbavo

    I have tried the variation of the entire URL and just the anchor itself for all the above.

    If you visit the website from a mobile device and use the mobile menu, you will see the problem as it is still unresolved.

    Hope this explains the problem in a way that you can provide a solution. Kind regards

  • lazybeaches replied

    here is an example of the mobile menu not closing after selecting an item in the mobile menu from a mobile device

  •  58
    Olga replied

    Hello,

    thanks for your notice!

    ok, it is clear for now. 

    We'll analyze the problem you mean and answer asap


    thanks!

  •  58
    Olga replied

    All is done. I can give you advise how to make changes manually.

    Please, open the file - \voicer\js\voicer-custom.js

    1) find the code:

    $menuArrow = $('.header .menu .arrow');

    add after it the code:

    var $menuItem = $('.header .menu li:not(.menu-item-has-children) a');


    2) find the code:

    $('.darkOverlay').on('click', function (e) {

    add before it the code:


    //new
            $menuItem.on('click', function (e) {
                $menu.removeClass('opened');
                $menuToggle.removeClass('opened');
                $('body').removeClass('fixed');
                $menuWrap.css({
                    'height': ''
                });
            });


    After changes applying please check the site in an incognito browser tab


    thanks!

  • lazybeaches replied

    Thanks Olga! that did the trick!

  •  58
    Olga replied

    Glad to help!