Customized Hamburger Icon transitioning late - Support | Kriesi.at

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
June 23, 2019 at 10:04 pm #1112764
haydaw
Participant
Hello,

Not really sure how to phrase this request. I updated the icon for the hamburger menu icon, I am using a layout where the mobile menu is always displayed. I am also using the scaling menu option. When the menu is static at the top of the page, I replaced the icon with the text “MENU”, and when the scaling effect takes place and the menu shrinks, I have it set to change back to the hamburger menu icon.

During this transition phase however, I do not have a way of adjusting the menu icon, as I have it set to change when the css class changes during the shrinking effect. Unfortunately, the css does not change immediately, and there is a 20-50 pixel unresponsive area.

If you go to the link I have attached below, you should see what I am describing. Do you have any input on how this may be adjusted?

Steps for replication:

1. Load page
2. Without scrolling, notice the menu icon says “MENU”
3. Scroll down slightly, until the menu background becomes visible. You will notice the word is now cut off and larger then the menu.
4. Scroll down slightly more, you will notice the words “MENU” adjust back to the original hamburger icon.

This is where my problem comes into the play, the aesthetics of the text “MENU” going over the boundary of the menu background is undesirable. Images below for further clarification.

Here is the Code I am using (most important is the .header-scrolled class)
```
span.av-hamburger.av-hamburger--spin.av-js-hamburger:after {
    display: block;
    position: absolute;
    content: "MENU";
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 36px;
    font-weight: 100 !important;
    font-family: 'Roboto', sans-serif;
    right: 0;
    top: 13px !important;
    transition: opacity .2s ease-out;
    line-height: 36px !important;
}

span.av-hamburger-box {
    transition: opacity .2s ease-out;
    opacity: 0; 
}
span.av-hamburger.av-hamburger--spin.av-js-hamburger.av-inserted-main-menu.is-active:after {
    color: #222 !important;
}

header#header.header-scrolled.header-scrolled-full span.av-hamburger.av-hamburger--spin.av-js-hamburger:after {
	opacity: 0 !important;
}

header#header.header-scrolled.header-scrolled-full span.av-hamburger-box {
    opacity: 1 !important;
}
```
- This topic was modified 5 years, 5 months ago by haydaw. Reason: added code
June 24, 2019 at 1:25 am #1112790
Mike
Moderator
Hey haydaw,
Thank you for the link and the good explanation.
Since you are switching your menu with the change in the header-scrolled class, there will be this “lag” because it is waiting for the class change.
I recommend using javascript to force the change based on the scroll of the page.
Here is an example:
```
(function ($) { 
  $(window).scroll(function() {
var height = $(window).height();    
      var scroll = $(window).scrollTop();
      if (scroll >= 10) {
          $(".enter_your_class_here").css({ 'css_here': 'css_here' });
      } else {
          $(".enter_your_class_here").css({ 'css_here': 'css_here' });
      }
  });
 })(jQuery);
```
Another option is to try adjusting the \enfold\js\avia-snippet-sticky-header.js to triger the class change sooner, this could then be added to your child theme so it won’t be lost with each update.

Best regards,
Mike
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.