malihu

Hello again,

Can you send me some screenshots and/or video of where the scrolling should be and what happens?

Thanks for the feedback. If anything similar happens let me know ??

Hello,

In most cases the issue you’re describing does not happen but there are cases when it happens and there’s not much we can do about it, as it depends on a number of reasons including page layout, specific CSS rules, browser engine and cache etc.

I’ve made the plugin script in such a way to deal with such issues but there are cases where it’s not really possible to avoid this.

Does this happen on specific browser(s)? Does it happen the very first time you visit the page (i.e. when the pages are not cached by the browser)?

Can you post your site/page URL so I can check it?

Marking this as resolved but let me know if you need more help.

You’re welcome ??

Sometimes we need to override some CSS rule with another one. Selecting a color in the customizer adds a CSS rule to the document but another plugin or some other CSS might override it. In such cases we need to override it again ourselves with another rule.

You’re welcome ??

It’s usually better to use translateY for such functionality because it performs better than position, margin etc. and it doesn’t affect elements position and page layout.

No problem ??

Not sure if this is the color you want for the hover but you can simply do this:

#primary-menu.main-nav a:hover {
    color: #A71B18;
}

Let me know ??

Hello Tomas,

Indeed, the sticky header position causes the issue. The CSS rules top and margin-top that are used in order to show/hide the sticky header change the actual flow of the elements in the document. This causes the scrolling position to change depending on the visibility of the sticky header (e.g. when sticky header is visible, the offset works correctly when clicking the link).

The easiest way to solve this is to change the sticky header visibility from CSS top and margin-top to the transform CSS property, as this property does not affect the document flow or element position.

So, just add this to you CSS:

header#header-sticky{
	top: 0;
	transform: translateY(-90px);
}

header#header-sticky.visible{
	margin-top: 0;
	transform: translateY(0);
}

Let me know ??

Thanks for the review ??

No need to open a new topic. Tell me which page you want to me to check ??

OK try one more thing:
In plugin settings disable “Allow only one highlighted element at a time” option.

No, not in the “selectors are excluded” box. You change the first “Selector(s)” field from:

a[href*='#']:not([href='#'])

to:

#primary-menu a[href*='#']:not([href='#'])

Change this option, save changes and let me know so I can check it again.

No problem ??

To reset the theme’s highlight and keep “Page scroll to id” scrolling and hover highlight, add the following to your CSS:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:not(:hover):not(.mPS2id-highlight){
	color: #FBBE4D;
}

Also, since you don’t need to highlight the mobile menu links, you should change the “Selector(s)” option in plugin settings to:

#primary-menu a[href*='#']:not([href='#'])

Hello,

The correct CSS should be:

#primary-menu.main-nav a.mPS2id-highlight {
	color: #FBBE4D;
} 

The second CSS rule you have is not needed as there’s no #sticky-navigation in your page.

Also, go to plugin settings and disable the “Keep the current element highlighted until the next one comes into view” option.

Let me know ??

Να ‘σαι καλ? ??

Επ?ση?, απ? ?τι βλ?πω θα χρειαστε?? να κλε?νει? το μενο? και για το desktop site, οπ?τε ?λλαξε τον κ?δικα σε:

<script>
(function($){
    $(window).on("load",function(){
        $(document).on("click","#navbar-mobile .menu-item .__mPS2id",function(){
            $("#navbar-mobile a[class*='offcanvas-close']")[0].click();
        });
        $(document).on("click","#menu-onepage-menu .menu-item .__mPS2id",function(){
            $(".uc_liquid_hamburger.is-opened-navi").trigger("click");
        });
    });
})(jQuery);
</script>