Problem with 'scroll to' items

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #24590
    Henkvl55henkvl55
    Member

    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!

    Attachments:
    #24602
    VeenaVeena
    Moderator
    This reply has been marked as private.
    #24632
    Henkvl55henkvl55
    Member
    This reply has been marked as private.
    #24655
    RaghavendraRaghavendra
    Moderator

    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.

    #24675
    Henkvl55henkvl55
    Member

    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?

    #24720
    VeenaVeena
    Moderator

    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');
    
    Attachments:
    #24975
    Henkvl55henkvl55
    Member

    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?

    #25009
    VeenaVeena
    Moderator

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

    #25011
    Henkvl55henkvl55
    Member

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.