Navigation Anchor not stopping at top of row

Mandy

We have customised our site to have 145px header area above the nav menu bar. Now when an item on the nav menu is clicked, the nav anchor scroll doesn't stop at the top of that row/item underneath the nav bar. Instead it scrolls past the title of the row and it stops in the middle of the row cutting off the content in that block.

Are you able to advise where/how I can adjust these settings so that it stops at the top of the row every time?

I've tried to look into it myself and not had much luck with adjusting this setting.
I can see that the script for the scroll is in the Chillout JS script.js file. But I'm struggling to find where/how to adjust the height/stopping point of the nav anchor scroll.

Any advice would be gratefully received.

Thanks You.
www.pmngroup.com/wordpress

surgeon

Hi,
go to file: ..\wp-content\themes\chillout\js\scripts.js
line 234
scrollTop: ($(hash).offset().top - (headerH)) + "px"
change to
scrollTop: ($(hash).offset().top - 145 - (headerH)) + "px"

line 163:
scrollTop: ( $(hash_from_url).offset().top - (headerH) + ( sticky_offset ) ) + "px"
change to
scrollTop: ( $(hash_from_url).offset().top - 145 - (headerH) + ( sticky_offset ) ) + "px"

Mandy

Thank you very much for your advice.
This has solved the problem.

Mandy

Hi Apollo,

Further to this, we are currently having an issue when you click the menu item, it scrolls to the correct point on the page. But displays the incorrect menu fa-fa icon in the nav bar.

i.e if you click 4th nav item along (clients), it scrolls to clients section on page. but nav bar displays fa-fa icon for 3rd nav item along (The group) instead.

This started when we deleted our original menu (home page) and created a new menu (main menu). We deleted all the old anchor links and created new ones and linked them all up to the new menu (main menu).

Do you have any suggestions as to how we can resolve this new nav issue?

Many Thanks
Mandy
www.pmngroup.com/wordpress

surgeon

This is because of the logo bar above the navigation menu. Even though it should work - it's not.
I'll try to find a solution for You, please wait few days.

Mandy

Thank you, I look forward to your reply.

Mandy

Hi Apollo,

Further to our conversation … Ive updated the theme to 1.3.8. and have found that the issue with the fa-fa icons displaying incorrectly still exists. i.e click on "The group", fa-fa displays for one next to it "about".

From our previous conversations about nav anchors, nav menu and looking into related console errors …
I have the following code hidden:

themes/chillout/js/script.js
line 178 & 185 - // $logo.velocity({'top':G.logo_hide_pixels},500 );

wp-content/plugins/chillout-plugin/script.js
line 182 - 195 - // preloader:{ ….}
line 638 - // window.A13P.preloader.hide_main();

Ive looked at both the script files, to see if I could try figure out how the fa-fa icons are controlled/loaded, but i haven't been able to. Your assistance would be greatly appreciated.

Thanks for your continued support, I look forward to your reply.

Mandy
www.pmngroup.com/wordpress

surgeon

icon's animation is done by css, animation is fired by bootstrap-modal.js file and code fragment starting on line 246 in themes/chillout/js/script.js file.
in your case the problem is caused by the extra bar over the navigation menu and/or it's positioning.

Mandy

Thank you, this was very useful.

Amended line 59 in the bootstrap-modal.js file to reflect the px height values added to our script.js file (line 163) to accommodate the additional header space did the trick!

Thank again for your support and time!

Mandy

Hi Apollo,

We have recently updated our theme to v1.3.16 and all the related files included.
We are since having issues with our menu items in that the menu item "Home" & "Group" do not function anymore. You click on them and nothing happens. They are supposed to scroll to their relevant anchor point on the page.

I get the below error message in the console when looking into the issue - I'm not sure how to resolve it.
are you able to assist or help me understand what I the issue is?

ERROR:
Uncaught TypeError: Cannot read property 'top' of undefined.
(anonymous function) @ scripts.js?257c72:284
m.event.dispatch @ jquery.js?257c72:4
r.handle @ jquery.js?257c72:4

script.js: 284 = scrollTop: ($(hash).offset().top - 145 - (headerH)) + "px" //MANDY EDITED - 145 - Added


Following the theme update, I have manually made the changes to the following files to reflect the customisations we have on our header:

themes/chillout/js/script.js
line 230 & 237 - // $logo.velocity({'top':G.logo_hide_pixels},500 );
line 284 (Adding in -145 - ) - scrollTop: ($(hash).offset().top - 145 - (headerH)) + "px"
line 215 (Adding in -145 - ) - scrollTop: ( $(hash_from_url).offset().top - 145 - (headerH) + ( sticky_offset ) ) + "px"

wp-content/plugins/chillout-plugin/script.js
line 182 - 195 - // preloader:{ ….}
line 638 - // window.A13P.preloader.hide_main();

Themes/chillout/js/bootstrap-modal.js
line 246 (Adding in -145 - ) - return ($(id).position().top - 145 - headerH);

I look forward to your response,

Thank you,
Mandy
Link to our website -- http://goo.gl/9vUbAC

surgeon

Hi Mandy!
as I replied to You in another topic - this issue is solved, please stay tuned - day or two and You'll get the info about the updates release.

Mandy

Excellent, thanks very much. I look forward to the update!

surgeon

FYI - new version of Chillout theme is available to download from ThemeForest.

Mandy

Thank you, this has solved the issue