Okay
  Public Ticket #2281141
Hamburger menu closing cross
Closed

Comments

  • boblibob started the conversation
    January 25, 2020 at 4:09pm

    How to get a closing icon for the burger menu when its open/active?

    I can not find it in Elementor and settings in Elementor seems not to be all there is.

    Thanks!

  •  675
    Neuron replied
    January 27, 2020 at 1:20pm

    Hi,

    I am very sorry for the late reply, we were not working on the weekend.

    Where exactly do you want that change? By default that is not supported, but if you let me know the place where do you want to make the change, I'll see if we can do anything to reach that.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • boblibob replied
    January 27, 2020 at 1:25pm

    At the top header, main navigation on this site: re-design.se

    Thanks!

  •  675
    Neuron replied
    January 28, 2020 at 8:25am

    Hi,

    It seems like you're using a classic menu not a hamburger menu.

    - https://prnt.sc/qtvpou

    Feel free to ask for anything you need.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • boblibob replied
    January 28, 2020 at 8:34am

    But on mobile and others or if browser window is smaller the burger menu will appear.

    I'm using a header template I made changes to.

    Thanks!

  • boblibob replied
    January 28, 2020 at 8:40am

    I want it to look something like attached.

    Thanks!

  •  675
    Neuron replied
    January 29, 2020 at 7:13pm

    Hi,

    Sorry for the late reply.

    Can you please provide me with your wp-admin, I need to add some Custom JavaScript to make it look like that.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  •   boblibob replied privately
  •  675
    Neuron replied
    January 30, 2020 at 2:24pm

    Hi,

    Sure, first you need to add a bit of Custom jQuery which will enable the ability to add class in active.

    The following plugin will allow you to add scripts in the website.

    - https://wordpress.org/plugins/insert-headers-and-footers/

    So go to Settings > Insert Headers and Footers and add the script below.

    <script>
jQuery(document).ready(function($) {
    $('.m-nav-menu--mobile-icon').on('click', function(){
        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
            $(this).html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>');
        } else {
            $(this).html('<svg style="enable-background:new 0 0 139 139;" width="42px" height="42px" version="1.1" viewBox="0 0 139 139" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line class="st0" x1="26.5" x2="112.5" y1="46.3" y2="46.3"></line><line class="st0" id="XMLID_9_" x1="26.5" x2="112.5" y1="92.7" y2="92.7"></line><line class="st0" id="XMLID_8_" x1="26.5" x2="112.5" y1="69.5" y2="69.5"></line></svg>');            
        }
    });
});
</script>

    You can change to any icon in these line. https://prnt.sc/qv3p58

    Feel free to ask for anything you need.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • boblibob replied
    January 31, 2020 at 11:55am

    Yes it worked as expected. The look was a bit off according to original design so I changed the closing icon to same look as the original hamburger.

    <script>
jQuery(document).ready(function($) {
    $('.m-nav-menu--mobile-icon').on('click', function(){
        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
            $(this).html('<svg style="enable-background:new 0 0 139 139;" width="42px" height="42px" version="1.1" viewBox="0 0 139 139" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line class="st0" x1="46.3" x2="92.7" y1="46.3" y2="92.7"></line><line class="st0" id="XMLID_9_" x1="46.3" x2="92.7" y1="92.7" y2="46.3"></line></svg>');
        } else {
            $(this).html('<svg style="enable-background:new 0 0 139 139;" width="42px" height="42px" version="1.1" viewBox="0 0 139 139" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line class="st0" x1="26.5" x2="112.5" y1="46.3" y2="46.3"></line><line class="st0" id="XMLID_9_" x1="26.5" x2="112.5" y1="92.7" y2="92.7"></line><line class="st0" id="XMLID_8_" x1="26.5" x2="112.5" y1="69.5" y2="69.5"></line></svg>');            
        }
    });
});
</script>

    Thanks!

  •  675
    Neuron replied
    January 31, 2020 at 1:30pm

    Glad to know, feel free to ask for anything you need.

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.