Apply CSS to full width submenu ONLY when it goes sticky

Hi,

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(){
?>
<script>
  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.');
        jQuery('.mySubmenu').addClass('fixedSubmenu');
    }
    else {
        console.log('Submenu is not at the top.');
        jQuery('.mySubmenu').removeClass('fixedSubmenu');
    }
});
  });          
</script>
<?php
}
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_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js", false, null);
   wp_enqueue_script('jquery');
}

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,
Vinay

Hi,

Glad it is sorted for you!

Please take a moment to review our theme and show your support https://themeforest.net/downloads

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

Thank you for using Enfold :)

Best regards,
Vinay