Support Center Visit Demo License manager Buy @ envato

Side_slide menu width

dgedge
in Menu / Mega menu
Hi guys,

I love the side_slide menu, especially the fact that it includes the site's social icons at the bottom.
(I believe that the standard mobile menu should do this to)

I have one issue though: my site is in italian, a language with long words, thus I need the menu to be wider.

Through CSS I successfully increased the width of the menu using: 

html body #Side_slide { 
    width: 80%;
    right: -80% !important;
}

then I planned to change its "right" value when the menu is activated, however I noticed that in scripts.js in rows 658-690 you directly animate the value of "right" via JS instead of adding/removing a class like 'active' or 'open' which has the animation.

Something like:

#Side_slide {
  transition: right 0.3s;
  width: 80%;
  right: -80%;
}

#Side_slide.active {
  right: 0;
}

I'd like to know if you guys are open to move to this approach in the future, or if there is a way for me to override this behavior for my website.

Thank you very much!

Comments

  • BryanBryan
    Hi,

    Could you please provide us with a link to your page? Also try to attach a screenshot, and more detailed info would be appreciated.

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dgedge
    Hi,

    in this screenshot you can see the issue with my menu items being too long and ending up in multiple lines.

    image


    I'd like the #Side_slide panel to be wider (say 80% of the page) so that my menu items stay on one line.

    They only way I can change this is on my child-theme is via CSS.
    So I widened #Side_slide with this code:

    #Side_slide {
      width: 80%;
      right: -80%;
    }
  • dgedge
    I did so, assuming that your JS handling the menu toggle worked like this:
    when toggle is touched, add a "active" class to #Side_slide, which causes the menu to come forward
    using CSS3 transitions on the "right" property.

    Something like:

    #Side_slide {
      transition: right 0.3s;
      right: -250px;
    }

    #Side_slide.active {
      right: 0;
    }

    In this way, adding/removing the "active" class would be enough for the menu to work.

    Only later I noticed that your JS has the animation and the "right" value change inlined, which prevents widening the #Side_slide via CSS
  • dgedge
    I forgot to include a link to my website, which has my incomplete/breaking change on #Side_slide



  • BryanBryan
    Unfortunately, this cannot be done with CSS, you would have to write custom JS in order to change this. Sorry
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dgedge
    Hi,

    I'm aware of that, but I'm having trouble with the custom JS.

    I have to remove the event handlers added from script.js, but I can't get it right.
    It is a matter of timing: my code should run after your code in script.js  has enabled #Side_slide and registered the click handlers on the responsive-menu-toggle.

    Is it possible for me to register my code as some kind of callback to yours after it is done enabling #Side_slide?

    Thanks
  • AlbertAlbert
    We are really sorry but like my college above said, we do not have any solution/method to make it possible unfortunately and this requires much more customization than above.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dgedge
    That's alright.

    For the moment I won't use Side_slide then.

    Will you consider switching its animation implementation to pure CSS3 in the future?

    CSS3 animations are more optimized as browsers often delegate this to visitors' graphics-card, while JS animations have to run on the CPU. 
    Besides, it would also allow customizations like mine, which benefit all sites in languages with long words (most languages other than english :P)

    Cheers!
  • BryanBryan
    We will consider it for the future.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.