Problem with 'scroll to' items

[henkvl55]

Hi,
I have a one page website, but I am having trouble with the menu items that are supposed to scroll to the related section.
They do scroll, but there is a problem with the margins of the section. When I click on a menu item (Adviesdiensten or Over Moja Rada) it scrolls a bit too far. Is there any way to correct this? For most items I had to find a dirty work around, but for some items this isn’t possible.

Also – the main menu has subitems, when you click on one of the sub items, the page jumps down to the related section, it doesn’t scroll. How can I fix this?

Please see: http://www.mojarada.nl/ to be able to see what I mean.

Thanks!

[Veena]

This reply has been marked as private.

[henkvl55]

This reply has been marked as private.

[Raghavendra]

You can do this in the child theme by having a separate JS file in the child theme with the above code copied. You will need to ensure that your child theme JS is loaded prior to the main.js file by setting the right priority in

https://developer.wordpress.org/reference/functions/add_action/

when you do this –

https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

in your child theme.

[henkvl55]

Thank you for your reply, but I have no clue what to do.
Are you asking me to change things in the WP core? (wp-includes/functions.php)

Can you please describe the steps I need to take?

Also, in the child theme, do I need to add js/main.js or just main.js without the parent folder?

[Veena]

Pls ignore the previous code and use the below modified code –

$('.sub-menu > li > a[href*="#"]').smoothScroll(
                   {easing: 'swing', speed: 700, offset: -30, exclude: ['.external a']});

Child Theme –
What you need to do is just create another folder named “js” in your child theme and create a new js file .
Add the modified code in to your new js file(you must add your code in document ready function ) .
Pls see the attached folderstructure png file .
And then you need to add below code in your child theme’s functions.php file .

function my_custom_scripts() {

    wp_enqueue_script('my-custom-js', get_stylesheet_directory_uri() . '/js/my-custom.js', array('jquery'), false, true);
} 

add_action('wp_enqueue_scripts', 'my_custom_scripts');

[henkvl55]

Thank you so much, this last post was really helpful! The scrolling for the submenu items is fixed now!

The problem with the margins remains…
Right now, the only way to fix it, is to change the offset in the ORIGINAL main.js file, I would really like to know if I can overrule this script in the child theme, I really don’t want to mess with originals because it will screw up the updates. Can you please tell me how to do this?

[Veena]

You just need to copy the modified code in to your my-custom.js file.

[henkvl55]

Please don’t get me wrong – I copied the code you sent me in the last post in the my-custom.js file. But this code was for the scrolling problem for the submenu items. This works fine.
Like I said – the problem for the wrong margins for the top level menu items still remains. I can only solve this by editing the original main.js file, because this file gets loaded after the my-custom.js file, so changes I make in my-custom.js will be overruled by the original lines in main.js. I hope you understand now what I mean.

[Author]

Posts