Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #460021

    Hello,

    Apologies if this has been asked before…

    I would like to hide the mobile menu and only have it appear as you scroll as you can with option for main page.I’m guessing there is some css or .js that can be used?

    Thanks guys

    • This topic was modified 9 years, 6 months ago by tjswarbs78.
    #460313

    Hey tjswarbs78!

    You can use this CSS to have it scroll down the page with you.

    #advanced_menu_toggle {
      position: fixed;
      right: 20px;
      top: 90px;
    }

    But to get it to behave like the regular menu and hidden until scrolling that is going to take a lot of time and code and would have to be considered custom work for now. Consider adding a feature request here, https://kriesi.at/support/enfold-feature-requests/.

    Regards,
    Elliott

    #460703

    Trust me to pick something that’s complicated :)

    Thanks for the reply, I appreciate it

    #461060

    Hi!

    Glad we could help :)

    Cheers!
    Rikard

    #595826

    Hi Team Kreisi

    Did this feature request / query ever get resolved – or any custom code created?

    I too am trying to find a way to hide the logo & top nav bar on a smartphone (not tablet) until scrolling begins.

    Thanks

    Ben

    #596684

    Hi Ben,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    #596696

    Hi

    I have taken the logo off for now (on the mobile site) as there were two logos showing and just looked odd. I have also now made the header background transparent

    I am actually not sure I would need to make the nav scroll on moving as I am not sure it would add much more now.

    Thanks

    #596904

    Hey!

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

    function avia_custom_logo_app(){
    if(wp_is_mobile()){
    ?>
    <script>
    jQuery(window).scroll(function(){
    if(jQuery(this).scrollTop() > 100) jQuery('.logo img').addClass('logoop');
    if(jQuery(this).scrollTop() < 100) jQuery('.logo img').removeClass('logoop');
    });
    </script>
    <?php
    }}
    add_action('wp_footer', 'avia_custom_logo_app');

    and then add following to Quick CSS in Enfold theme options > General Styling

    .logoop { opacity: 0 !important; }

    Best regards,
    Yigit

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