Modify js code for sticky menu

  • Unknown's avatar
    celineruche · Member ·

    Hello,

    I used a specific theme for my website and wanted to make the menu sticky manually since it is not possible in the theme’s basic options.

    Here is what I did (thanks to chatgpt) but did not work:
    – I created a js file ‘sticky.js’ in the js folder of the theme add wrote this:
    window.addEventListener(‘scroll’, function() {
    var header = document.getElementById(‘masthead’);
    if (window.scrollY > 100) {
    header.classList.add(‘scrolled’);
    } else {
    header.classList.remove(‘scrolled’);
    }
    });

    – I modified the theme’s functions.php file by adding this in the end:
    function palmeria_enqueue_scripts() {
    wp_enqueue_script( ‘sticky’, get_template_directory_uri() . ‘/js/sticky.js’, array(‘jquery’), ‘1.0’, true );
    }
    add_action( ‘wp_enqueue_scripts’, ‘palmeria_enqueue_scripts’ );

    And the i wrote additional css but only for testing:
    .scrolled #masthead {
    background-color: #333;
    transition: background-color 0.3s ease;
    }

    When I reloaded my page, nothing changed for the menu…
    I am not very good at javascript so can anyone help me understanding the issue?


  • Unknown's avatar
    helper-heroponriki · Member ·

    Hello!

    Thank you for reaching out to the free support forums for websites hosted on WordPress.com. While your site is not hosted with us, we’re here to guide you in the right direction for assistance.

    Since you’re using the open-source version of the WordPress platform, which operates differently from what we provide on WordPress.com, you can find help at the community forums here:

    https://wordpress.org/support/forum/how-to-and-troubleshooting/

    The community members in the open-source forum are well-versed in these matters and are in the best position to offer support.

    I hope this information helps guide you in the right direction. Feel free to ask if you have any further questions or need more assistance.

  • The topic ‘Modify js code for sticky menu’ is closed to new replies.