Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 13, 2016 at 3:47 pm #647440
    sublime5o

    I have a submenu that I added to a page on my enfold theme using the Ava Editor. I am looking to have it show only on scroll. I thought when you started scrolling on the page an added class or ID was added to the body or something but I do not see anything changing. The div this is in is called #sub-menu1, I tried .header-scrolled #sub-menu1 { display: block; } #sub-menu1 {display: none; } but that did not work.

    June 13, 2016 at 4:20 pm #647463
    Yigit

    Hey sublime5o!

    Please add following code to Functions.php file in Appearance > Editor

    function avia_custom_logo_app(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 30) jQuery('#sub_menu1').removeClass('disp-no');
if(jQuery(this).scrollTop() < 30) jQuery('#sub_menu1').addClass('disp-no');
});
</script>
<?php
}
add_action('wp_footer', 'avia_custom_logo_app');

    and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .disp-no { display: none !important; }

    Regards,
    Yigit

    • This reply was modified 8 years, 6 months ago by Yigit.
    June 13, 2016 at 4:26 pm #647470
    sublime5o

    I added this in and it isn’t working exactly. On page load the Sub Menu still loads but once you scroll some and then scroll back to the top it disappears. I need it not to show on load and only show once the page has been scrolled.

    June 13, 2016 at 4:29 pm #647474
    Yigit

    Hi!

    I edited the code i posted here. Please replace the code and check once again. You can adjust 30 as needed. That is pixel value from top when scrolled

    Best regards,
    Yigit

    June 13, 2016 at 4:31 pm #647477
    sublime5o

    Same issue resides after updating the code you replaced…

    June 13, 2016 at 4:33 pm #647480
    Yigit

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Yigit

    June 13, 2016 at 4:47 pm #647497
    sublime5o

    Here it is…

    June 13, 2016 at 4:54 pm #647506
    Yigit

    Hey!

    I changed the code to following one 

    function avia_custom_logo_app(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 30) jQuery('#sub_menu1').show();
if(jQuery(this).scrollTop() < 30) jQuery('#sub_menu1').hide();
});
</script>
<?php
}
add_action('wp_footer', 'avia_custom_logo_app');

    and removed custom CSS code. Please review your website now

    Regards,
    Yigit

    June 13, 2016 at 4:57 pm #647512
    sublime5o

    If you go to the site you will see the red menu bar is still showing on page load….

    June 13, 2016 at 5:04 pm #647521
    Yigit

    Hey!

    I added following code to Style.css file of your child theme

    #sub_menu1 { display: none; }

    Now it is not visible on page load :)

    Best regards,
    Yigit

    June 13, 2016 at 5:13 pm #647533
    sublime5o

    Perfect. Thank you so much.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Show SubMenu on scroll’ is closed to new replies.