Viewing 30 posts - 1 through 30 (of 35 total)
  • Author
    Posts
  • #613620

    Any way to make the mobile menu re-appear when the user scrolls up? It’s a standard pattern on a lot of sites.

    #613902

    Hi jomtones!

    Can you please post the link to your website?

    Cheers!
    Yigit

    #614068

    Sure – current version is at: http://new.btribble.com.

    Why is it meant to behave like that already?

    #615494

    Hi – any thoughts on this?

    Thanks

    #615525

    Hey!

    It;s not entirely clear what you are trying to do but as i understand a menu appears when you scroll down the page and if you like to make that menu a fullscreen mobile menu please use the code below in Enfold > General Styling > Quick CSS

    @media only screen and (max-width: 1024px) {
    nav.main_menu {display:none !important;}
    #advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
    }

    Cheers!
    Vinay

    #615599

    Hi – sorry I didn’t make myself clear.

    This is the pattern I want to create:

    ON MOBILE VIEWPORT
    1. User scrolls down – header and menu button scrolls out of view
    2. When user scrolls *back up* – the header reappears
    3. User can now either scroll down again, and header will scroll out of view.
    4. OR user can select menu and tap through to another part of the site.

    Hope that explains it!

    #616967

    Hi!

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

    function custom_blog_banner(){
    if(wp_is_mobile() ){
    ?>
     <script>
    // Hide Header on on scroll down
    var didScroll;
    var lastScrollTop = 0;
    var delta = 5;
    var navbarHeight = $('#header').outerHeight();
    
    $(window).scroll(function(event){
        didScroll = true;
    });
    
    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);
    
    function hasScrolled() {
        var st = $(this).scrollTop();
        
        // Make sure they scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
        // If they scrolled down and are past the navbar, add class .nav-up.
        // This is necessary so you never see what is "behind" the navbar.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down
            $('#header').removeClass('nav-down').addClass('nav-up');
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
                $('#header').removeClass('nav-up').addClass('nav-down');
            }
        }
        
        lastScrollTop = st;
    }
     </script>
    <?php
    }}
    add_action('wp_footer', 'custom_blog_banner');

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

    .nav-up {
        top: -40px;
    }

    Please note that i have not tested the code and that you would be only able to see the changes on mobile, resizing browser window would not work.

    Best regards,
    Yigit

    #617626

    I’ve added this and tested on the XCode iOS simulator, but it doesn’t seem to do anything. Can you confirm it’s working at your end?

    Many thanks for your help!

    #617850

    Hey!

    Can you please add following code to Quick CSS as well

    .responsive #header { position: fixed; top: 0; width: 100%; }

    If that too does not help, please hire a freelance developer or request such feature here – https://kriesi.at/support/enfold-feature-requests/

    Cheers!
    Yigit

    #617970

    OK thanks, that didn’t seem to do anything. If anyone runs into the same problem, my solution was to just make the header fixed and transparent on scroll.

    #618981

    Hi,

    Ok great, thanks for sharing :-)

    Regards,
    Rikard

    #734612

    headroom.js works like a charm.
    CSS

    
    .headroom {
      will-change: transform;
      transition: transform 200ms linear;
    }
    .headroom--pinned {
      transform: translateY(0%);
    }
    .headroom--unpinned {
      transform: translateY(-100%);
    }
    .headroom--unpinned--action {
      transform: translateY(calc(-257%));
    }

    JS

    window.onload = function () {
    
      
        var mainHeader = document.querySelectorAll("header")[0];
    
        var headroomMain = new Headroom(mainHeader, {
            "offset": 60,
            "tolerance": 10,
            "classes": {
                "initial": "headroom",
                "pinned": "headroom--pinned",
                "unpinned": "headroom--unpinned"
            }
        });
    
        headroomMain.init();
    };

    helper-main-menu.php (includes/helper-main-menu.php)

    
    <header id='header' class='all_colors header_color  headroom <?php avia_is_dark_bg('header_color'); echo " ".$headerS['header_class']; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>
    

    You must download and add headroom.js library.

    • This reply was modified 7 years, 10 months ago by talawar.
    #734734

    Hi @talawar,

    Thanks you for sharing, much appreciated :-)

    Best regards,
    Rikard

    #770618

    Hi @talawar,

    thanks for your input!

    I tried to follow your steps, but it’s not working yet.

    I put the CSS into my child themes style.css and modified helper-main-menu.php as you suggested.

    Then i am not so sure, if i did the following right. I uploaded Headroom.js to enfold-child/js/ and added your custom JS to a new file. I tried to register both files vie child-themes functions.php ( as suggested here https://kriesi.at/support/topic/custom-js/ ).

    enfold-child/functions.php:

    wp_register_script( 'sw_custom_java', $template_url.'/js/SW_custom_js.js', 'jquery', "1", true);
    wp_register_script( 'headroom_js', $template_url.'/js/Headroom.js', 'jquery', "1", true);
    
    wp_enqueue_script( 'sw_custom_java' );
    wp_enqueue_script( 'headroom_js' );

    any ideas, what i did wrong?

    Thanks!

    #770656

    Hi,
    I am afraid making third-party scripts compatible with the theme is unfortunately beyond the support scope we offer. Sorry for that!
    But here is some more info on headroom: http://wicky.nillia.ms/headroom.js/

    Best regards,
    Mike

    #770664

    Hi @Mike,

    thanks for you reply. Although i understand, that third party scripts are not your business, could you say, wether my approach to install a custom JS from within the child-theme is making sense?

    I am trying to do the custom JS include within the child-theme via child-theme/functions.php and child-theme/js/ for the JS Files (so that i don’t loose too much on a theme update). Are my enqueueing scripts making any sense in general for this setup (regardless if the scripts itself are working)? Is $template_url.’ referencing to “…/enfold/” or to “…/enfold-child/” ?

    Hopefully @talawar might find the time to get back on this.

    Best Regards,

    Stefan

    #770680

    Hi,
    $template_url.’ is referencing to “…/enfold/”
    For your child theme with the folder and file /enfold-child/js/Headroom.js
    please try:

    wp_register_script( 'sw_custom_java', get_stylesheet_directory_uri().'/js/SW_custom_js.js', 'jquery', "1", true);
    wp_register_script( 'headroom_js', get_stylesheet_directory_uri().'/js/Headroom.js', 'jquery', "1", true);
    
    wp_enqueue_script( 'sw_custom_java' );
    wp_enqueue_script( 'headroom_js' );

    More info: https://kriesi.at/support/topic/how-to-add-custom-jquery-to-enfold-theme/#post-311208

    Best regards,
    Mike

    #770723

    @thatsmyname in your child’s functions.php add the headroom.js before the custom.js (‘SW_custom_js.js’ in your case.)
    NOTE: Code below uses custom.js not SW_custom_js.js.

    function custom_function() {
    	wp_enqueue_script( 'headroom', get_stylesheet_directory_uri() . '/js/headroom.js', false, NULL, 'all');
    	wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), 2, true);
    }
    #770732

    cool, thanks to both of you @talawar and @mike!

    i will try this out in a bit and let you know how it went.

    Best Regards and thanks again!

    Stefan

    #770788

    hi @talawar, are you setting any specifics via the enfold theme settings ui? i tried it with normal and transparent headers set to sticky and unsticky.

    it’s not working yet, but the headroom class is pointing to the right header, since the full header disappears with:
    .headroom { display: none !important; }

    so i am not sure wether the code is running but interfering with other theme settings, or if it’s not running at all.

    any ideas regarding possible interference?

    Best Regards,

    Stefan

    #770795

    i tried install it via the enfold/functions.php as well:

    function avia_register_frontend_scripts() {
      $template_url = get_template_directory_uri();
      $child_theme_url = get_stylesheet_directory_uri();
    
      //register js
      wp_enqueue_script( 'avia-compat', $template_url.'/js/avia-compat.js', array('jquery'), 2, false ); //needs to be loaded at the top to prevent bugs
      wp_enqueue_script( 'avia-default', $template_url.'/js/avia.js', array('jquery'), 3, true );
      wp_enqueue_script( 'avia-shortcodes', $template_url.'/js/shortcodes.js', array('jquery'), 3, true );
      wp_enqueue_script( 'avia-popup',  $template_url.'/js/aviapopup/jquery.magnific-popup.min.js', array('jquery'), 2, true);
    
      wp_enqueue_script( 'headroom', $template_url.'/js/headroom.js', false, NULL, 'all');
      wp_enqueue_script( 'custom', $template_url.'/js/custom.js', array('jquery'), 2, true);
    
      wp_enqueue_script( 'jquery' );
      wp_enqueue_script( 'wp-mediaelement' );
    
    • This reply was modified 7 years, 7 months ago by thatsmyname.
    #770811

    i found out, that the custom.js and headroom.js are running by placing prompt(); messages at several points.

    and i tried, similar as on http://wicky.nillia.ms/headroom.js/, to take simpler actions:

    .headroom--pinned { display: block !important; }
    .headroom--unpinned { display: none !important; }

    i set offset and tolerance to 0 in the custom.js, so the “display: none” part should have immediate effect. nothing happens so far.

    #770816

    i am not that firm in js, but i found at least, that right in the beginning of the headroom script, the constuctor is running into this. “!Headroom.cutsTheMustard” seems to be true and then, nothing more happens.

    Headroom.prototype = {
      constructor : Headroom,
      init : function() {
        if(!Headroom.cutsTheMustard) {
          return;
        }

    somewhere else read: “Headroom.cutsTheMustard is only true if browser supports all features required by headroom.” hm..

    • This reply was modified 7 years, 7 months ago by thatsmyname.
    #770825

    finally it works on desktops.

    two things were wrong. i had the wrong headroom.js file and it needs a sticky header. so next thing will be, to get it to work on mobile.

    #771003

    Hi @thatsmyname,

    Great, hope you get it working :-)

    Best regards,
    Rikard

    #957127

    @Thatsmyname: Did it also work on desktop with a mobile menu (burger)? That’s where I get stuck…
    And which headroom.js did you use? Thanks!

    #957892

    Hi @thatsmyname,

    Would be great if you have some further for @ravicski.

    Best regards,
    Rikard

    #957907

    Hi @ravicski,

    since it is one year ago that i tried it last time, i am not sure anymore what i did. Most probably i didn’t get it to work on mobile or it was too unstable regarding all those interfering theme settings.

    I think i didn’t get past the point, where it worked with the desktop header but not with the mobile header. And since i want my site to be as stable as possible, the whole .js workaround approach seemed to much for what it was supposed to achieve.

    Sorry for not having more details.

    Best Regards, Stefan

    #958923

    Hi Stefan,

    Thanks for sharing, much appreciated :-)

    Best regards,
    Rikard

    #1017586

    This would be a great feature to add. Looks like a thing many new sites are adding. Example: mintz.com

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