Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1002957

    Hi Guys!

    I’m using a full width submenu as the main menu. This works fine, especially when it goes sticky upon hitting the top. However I’d like to be able to apply some styling to it AFTER it sticks to the top. Unfortunately I can’t see where any of its classes change at that point, so I’m not sure how to target it. I was going to try the solution at, but that code apparently no longer exists as I couldn’t find it in the current js/avia.js file.

    Any suggestions? Especially ones that could persist through theme updates?




    Hey Scott.
    You are correct, there is no class change once the menu hits the top of the page. There is a position change from absolute to fixed which is done via .js

    You can find the avia.js file by going to appearance > editor.
    Make sure the “theme to edit” is the Enfold parent and scroll down until you see .js under the “Theme Files” tree.

    It can also be found via ftp at wp-content>themes>enfold>js
    The lines for the css change are 1349 to 1377

    The entire function for sticky sub menu starts at 1318 and ends at 1459

    Ways to make changes that persist after updates?

    Create a child theme and make change to avia.js in there or the functions.php

    Hope that help a little




    Thanks tjswarbs78 for helping us out. Scott if you need further assistance please post a link to your website and I’ll check the code of the menu.

    Best regards,


    Sorry for the delayed reply. tjswarbs78, thanks for the tip on where to find the appropriate section of code in avia.js. One thing though: If I do as you suggest, make changes to avia.js in a child theme, that would require copying the entire avia.js file to the child theme /js location, would it not? My understanding has always been that from that point on, the child theme’s avia.js would be the one that’s used. So while that may persist any changes I might make, changes Kriesi makes to avia.js for theme updates would not get picked up, which could end up breaking the site at some point, isn’t that right?

    Is there any stand alone piece of code that could be put into the child theme functions.php file that would add a class to the menu when it turns sticky? Something like that would allow me to target the menu with CSS only when it’s stuck to the top and still persist through theme updates.





    To add a custom class “fixedSubmenu” whenever the submenu reaches the top please perform the below steps.

    1. First, enable custom CSS class name support from Enfold Options > Layout Builder > Show element options for developers
    2. Add a custom Class name to the submenu element “mySubmenu”.
    3. Paste the below code to your child theme functions.php

    // Custom submenu class
    function fixedSubmenuFunc(){
      jQuery(document).ready(function() {
         var distance = $('.mySubmenu').offset().top,
         $window = $(window);
          $window.scroll(function() {
        if ( $window.scrollTop() >= distance ) {
            console.log('Submenu is at the top.');
        else {
            console.log('Submenu is not at the top.');
    add_action('wp_footer', 'fixedSubmenuFunc');
    // End function

    If you do not see any change make sure the jQuery loads first by adding the below script

    /* Force load jQuery First */
    if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
    function my_jquery_enqueue() {
       wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://", false, null);

    You can now use the class name “fixedSubmenu” to style the submenu when it reaches the top.

    For more information about adding custom script please check this link.

    Best regards,


    Hi Vinay:

    That worked great! I just had to change the “$(” to “jQuery(” in the var distance = and the $window = lines.

    Thank you!!




    Glad it is sorted for you!

    Please take a moment to review our theme and show your support

    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Apply CSS to full width submenu ONLY when it goes sticky’ is closed to new replies.