Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #417755

    Hi,

    I came a cross some scrips that would a great feature for the menu on a smartphone. What would be the best way to implement those JS without compromising the main them. IfI was was to use the child theme option where would I implement the JS? and how would I adjust the css to match the current menu?

    it s simple hide and show menu on scroll up or down. Could be great for the main menu as an extra feature on the admin panel to.
    https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

    Thanks,
    D

    #417759

    Hi dhuet!

    You can add following code to Functions.php file of your child theme

    function add_custom_menu(){
    ?>
    <script>
    YOUR CODE GOES HERE
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_menu');

    Best regards,
    Yigit

    #417763

    thanks!

    #417765

    Hey!

    You are welcome! Let us know if you have any other questions or issues

    Cheers!
    Yigit

    #417781
    This reply has been marked as private.
    #419021

    Hi!

    Please use “#header” selector instead of “.header” and it should work fine :)

    Cheers!
    Yigit

    #419063

    Hi!

    Check the console, $ is not available so you need to wrap your JavaScript with a closure, like this:

    function add_custom_script(){
    ?>
    <script>
    (function($){
        $(window).load(function() {
           // you can use $ here    	
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    Cheers!
    Josue

    #419337

    Almost there! it does not seem to work on the mobile menu which is mostly the one i want to target.

    Thanks,
    D

    #419586

    The header gets position: relative; when viewed on smaller viewport, you’d need to somehow tell the header to remain fixed at all times, something like this:

    #header{ position: fixed !important; }
    

    Best regards,
    Josue

    #420688

    Josue,

    Is this how you recommend it:

    function add_custom_script(){
    ?>
    <script>
    (function($){
    $(window).load(function() {
    // you can use $ here
    // 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;
    }
    });
    })(jQuery);
    </script>
    <?php
    }

    #420691

    I use this as css but it does not seem to work.

    body {
    padding-top: 40px; // same as header height
    }

    #header{ position: fixed !important;
    background: #ff4a54 !important;
    height: 40px;

    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    }
    .nav-up {
    top: -40px; }

    #420780

    Hey!

    I’m sorry but this has implementation has fallen beyond our support scope, if you really need it you can request a customization here:
    http://kriesi.at/contact/customization

    Best regards,
    Josue

    #420783

    Oh, Great. I like that you have this option now. Thank you so much.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Mobile menu implementation’ is closed to new replies.