active menu item’s background disaaplears while scrolling

  • lukewater55

    (@lukewater55)


    12 months ago

    the password to reach the homepage is: getreide

    Hey there Support Team Members,

I created onepage homepage with Divi . 

Did everything that got recommended for divi:
https://manos.malihu.gr/using-page-scroll-to-id-with-the-divi-builder-plugin/

I also worked along this tutorial:



I used “pAge to Scroll id” to help me with navigation. When you scroll down, the area you are scrolling over, automatically changes its background color in the menu. So far that is working. The only thing, thats making it look not as nice is, that once you scroll the active menu item’s background disappears. When you stop, then its coming back. And its a bit laggy, its not instant....

I tried all settings and checkboxes, decreased the animation time to 1ms etc...

Nothing seems to work.

I checked the checkbox on this setting of course:

Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)

Here is a Video I made to show the issue:

https://www.dropbox.com/scl/fi/p1r7awj75aq8msfwpfh2u/brave-05-12-2023-x.mp4?rlkey=02leenkbgz7e9b25pxqn7pfzt&dl=0

Hope someone has an idea for me, so that the active menu item background color stays the same, until I reach a new section….. also turn off any kind of animation.

I just inspected one of the menu items, and as soon as I scroll the class changes to "__mPS2id _mPS2id-h mPS2id-clicked" when the scrolling stops, it changes back to "__mPS2id _mPS2id-h mPS2id-clicked mPS2id-highlight"

This is the CSS I used:

Maybe someone can spot the probleme there already?

/////////////////////////////////////////////////////////////////////////////

html #page-container .et_pb_fullwidth_menu ul li a.mPS2id-highlight {
    transition: background 10ms linear!important ;
}
html #page-container .et_pb_fullwidth_menu ul li  a {
    padding-left: 20px;
    padding-right: 20px;
	height: 63px !important;
}

@media (min-width:981px){
.et_fullwidth_nav #main-header .container {
    width: 70% !important;
}

.et_fullwidth_secondary_nav #top-header .container {
    width: 70% !important;
}
}



html #page-container .et_pb_fullwidth_menu ul li a.__mPS2id.mPS2id-highlight {
transition: all 50ms linear!important;
}

html #page-container .et_pb_fullwidth_menu ul li a.mPS2id-highlight {
transition: none !important;
background: rgb(206,174,114) !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-top: 20px !important;
padding-bottom: 6px !important;
max-height: 63px !important;

}

////////////////////////////////////////////////////////////////

Looking forward hearing from you

Greetings

Michael

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author malihu

    (@malihu)

    Hello,

    There seems to be a highlight delay in your links, which comes from another script in your theme, probably from the sticky menu plugin script but I can’t be sure.

    The only way to deal with this is to manually add a small javascript in your theme, e.g. edit your theme/child-theme footer.php and add the following before the closing body tag (</body>): 

    <script>
(function($){
    $(window).on("load",function(){
        if($('.et_pb_sticky #menu-hauptmenu-20-mit-anker').length){
            setTimeout(function(){
                var events = $._data(window, 'events');
                for (var i = events.scroll.length - 1; i >= 0; i--) {
                    if(!events.scroll) return;
                    var handler = events.scroll[i];
                    if (handler && handler.namespace != 'mPS2id') {
                        $(window).off('scroll');
                    }
                }
            },300);	
        }
    });
})(jQuery);
</script>

    Save/update the file, test your page and let me know.

    Thread Starter lukewater55

    (@lukewater55)

    wow!

    thank you so much! I added the code, and it seems like, the menu background is a bit snappier. But somethimes there is stilla waiting period. What parameters could also delay animation? or are setting animation speed?

    Any how! you are great! thank you

    Plugin Author malihu

    (@malihu)

    You’re welcome ??

    It seems that the additional delay comes from the side page navigation (the mini menu with the dots). Its highlight functionality conflicts with the sticky header menu links highlighting. We can’t really do much about this because removing this functionality will stop the dots from highlighting while the page is being scrolled.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘active menu item’s background disaaplears while scrolling’ is closed to new replies.