Rotate the toggle arrow of header toolbar on mobile while clicking


#1

Objective:
Clicking on the toggle arrow of the header toolbar should rotate the arrow too

Implementation:

  1. Please add the below JS to Jupiter -> Theme Options -> Advanced -> Custom JS

    (function($){
    $('.mk-toolbar-resposnive-icon').click(function(){
    $(this).toggleClass('mk-tri-open');
    });
    })(jQuery);

  2. Please add the below CSS to Jupiter -> Theme Options -> Advanced -> Custom CSS

    .mk-toolbar-resposnive-icon.mk-tri-open .mk-svg-icon{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    }

    .mk-toolbar-resposnive-icon .mk-svg-icon{
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    }

That’s it…! Clear all the cache and look for the changes.