Scrolling OFFSET not working on first Click

Hi,

The problem is that the non-fixed header occupies a certain height (127 pixels) in the page, which is removed when it becomes fixed. When this happens, the document’s overall height is changed, meaning that sections top offset also changes (you can confirm this by seeing the first “sudden gap” when starting to scrolling down the page).

Because of this, plugin’s offset works correctly only on second click or when you click a menu link on the fixed menu.

To overcome this, I suggest to add something like the following in your CSS:

#header-wrapper.static + *{
    margin-top: 127px;
}

The above should add a top margin on the element residing after the fixed menu, compensating for the area which was occupied by the non-fixed menu height.

Hope this helps

Mi Malihu,

Many thanks for answering my question with complete details.
I did realized the issue might be because of sticky header.

Alright for the Menu links pointing to the same page(Approach & Work) are working absolutely fine now.(Many Thanks again)
BUt for the menu links pointing to different page are not working.

What happens is that if i remove the #ID from those 2 links they don’t show selected page color when opened. Actually i don’t want to link them to specific ID but because they are not becoming active when opened i have assigned #id to link.
I have removed the #id from contact page so that you can understand better what’s the issue is.
I will be really thankful to you if can assist me on this.
Thanks!
Awaiting.

You can add the current menu item selector that is not handled by ‘Page scroll to id’ in your CSS and give it the same red background with white text color.

The CSS selector could be:
.navbar-default .navbar-nav>.current-menu-item>a:not(._mPS2id-h)

You can add the selector above in the rule where you highlight the links (along with the other selectors, e.g. .navbar-default .navbar-nav>.current-menu-item>a.mPS2id-highlight) or you can add it as an extra rule in your CSS:

.navbar-default .navbar-nav>.current-menu-item>a:not(._mPS2id-h){
    background-color: #e30051;
    color: #fff;
}

Many THanks. TO some extent the issue is fixed but still there is 1 use case left that isn’t working well.

When you open the website both home page links show selection till the page is completely loaded. I don’t know how to look for this issue.
Second and the last is when you navigate from Contact or Branding page to the HOME page links they are again slightly down from the offset(probably same issue bcz of sticky header area on the top)

Sorry for disturbing you again. But if you can help me in fixing about I think it will be done.
Many thanks!

1. You could change the CSS to:

body:not(.home) .navbar-default .navbar-nav>.current-menu-item>a:not(._mPS2id-h){
    background-color: #e30051;
    color: #fff;
}

and see if does the trick.

2. You need to enable (check) “Scroll to location hash” in plugin settings, otherwise the plugin does not handle URL hashes.

3. Just a note:
You page does not seem to fully load at the moment(?)
Some of your images take 20 seconds to load or not at all…

Hi

I’m really thankful to you.
I will try to reduce the loading time of the page and will check the images causing delay. Rest the offset on navigating different pages is fine now (thanks again).

I appreciate for your help. (Y)

thanks

I am having the same issue (https://durch-blick.info/wordpress/) menu on right.

I tried the CSS above

#header-wrapper.static + *{
margin-top: 127px;
}

but I must not be getting it right bc it won’t work. Assistance much appreciated.

Thx.

@leighannef
You have to adjust the CSS selector and the margin value to match your own! Your sticky header gets the class is-sticky and its height is 116 pixels, so you need to change it to:

.is-sticky + * {
    margin-top: 116px;
}

You can be more precise with your selector in order to avoid future conflicts with other sticky elements (if they exist… I don’t know your theme/plugins) by also defining your header id:

#header-sticky-wrapper.is-sticky + * {
    margin-top: 116px;
}

The above should do the trick ??

Works great!

Love the plugin.

Thanks.

Hi

thank you for your plugin it is vergy great, and it will be good for us, if I could repair my falses…
I think I have the similar as @artalha_31, but however it doesn’t works. I tried it a many times, but it doesnt works :-(, so I cleared my codes and ask you know about it. Can you help me?

My is page: link

I have these problems:
1.) The scrolling works well on the second click but when I click on the menu item first time it doesn’t work correctly
2.) For the menu links pointing to different page are not working good, because if I us mypage/#ID they show selected page color when I am on the page, but I don’t want it. If I use only #ID, I can’t use these menu correctly from on other page. You can sho it at the menulink: “Mi a kineziológiai tapasz” and at the “Mire jó” Can you help me, please?
3.) When you watch my page a different windowsize, then from the many links the menubar will be wider. Then for example on mobile, the main text at the anchor are hidden.

Sorry for my questions, but I would like to use this great plugin, but I don’t know yet how…

Thank you for your help!

Sorry I missed some informations. At the 1.) points. these problem is only at he mobile screen….

Hi again. The 3 point is no more problem, but the other… I can’t do those…

@kenmetro

Hello,

1)Your theme’s mobile menu is a select form element. ‘Page scroll to id’ works on links (anchor elements) and cannot handle select element with options, meaning there’s no solution regarding the plugin and the mobile dropdown menu as it’s not handled by it at all.

2)The links highlighting is happening in your theme’s CSS. Same page links get specific classes in wordpress (e.g. current_page_item and current-menu-item) which are styled by the theme.
In your case, the links styling happens in:

• index (line: 42)
• style.css (line: 847)

You could overwrite the rules by adding the following in your CSS:

.main-navigation ul li.menu-item-type-custom.current_page_item a._mPS2id-h,
.main-navigation ul li.menu-item-type-custom.current-menu-item a._mPS2id-h{
    color: #333;
    background: white;
}

.main-navigation ul li.menu-item-type-custom.current_page_item a._mPS2id-h:hover,
.main-navigation ul li.menu-item-type-custom.current-menu-item a._mPS2id-h:hover{
    color: white;
    background: #F15A23;
}

Thank you very much for your answer, thats works great. And I could changed my mobile menu too. That is no more select menu, so the plugins work, but I have problem again with the colors, but now at the mobile menu. Can you help me?

And I would like to ask that how can I give a different offset number for the mobile screen?

Thank you for your help!