[Resolved] Mobile Header + jonsuh.com/hamburgers code isnt working

Home Forums Support [Resolved] Mobile Header + jonsuh.com/hamburgers code isnt working

Home Forums Support Mobile Header + jonsuh.com/hamburgers code isnt working

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #711317
    liorsade8

    hello,
    I’m using a Mobile Header in this site, and also the hamburger code of: https://jonsuh.com/hamburgers/
    this hamburger code is working great with non Mobile header on all of my sites.
    but i need it to work also in the mobile header option.
    please help,
    thanks.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #711325
    liorsade8

    i’m using this code in the child theme editor:

    add_action( ‘generate_inside_mobile_menu’, ‘tu_hamburger_icon’ );
    function tu_hamburger_icon() {
    ?>

    <span class=”hamburger-label”>תפריט</span>

    <?php
    }

    and using this code in the wp_head in elements:
    <link href=”http://t-talk.s178.upress.link/wp-content/themes/generatepress_child/dist/hamburgers.css&#8221; rel=”stylesheet”>

    and using this script code in the wp_footer in elements:
    <script>
    var hamburger = document.querySelector(“.hamburger”),
    menuToggle = document.querySelector( ‘.menu-toggle’ ),
    menuItems = document.querySelectorAll( ‘nav ul a’ );

    menuToggle.addEventListener(“click”, function() {
    hamburger.classList.toggle(“is-active”);
    } );

    for ( var i = 0; i < menuItems.length; i++ ) {
    menuItems.addEventListener( ‘click’, function( e ) {
    var closest_nav = this.closest( ‘nav’ );
    if ( closest_nav.classList.contains( ‘toggled’ ) || htmlEl.classList.contains( ‘slide-opened’ ) ) {
    var url = this.getAttribute( ‘href’ );
    var hash = url.split(‘#’)[1];

    // Open the sub-menu if the link has no destination
    if ( hash ) {
    e.preventDefault();
    hamburger.classList.toggle(“is-active”);
    }
    }
    }, false );
    }
    </script>

    #711333
    liorsade8

    hi
    i changed the code in the editor to this:
    generate_inside_mobile_header_menu
    and it’s working partly…

    but i still have some issues while downsizing – from desktop to tablet to mobile…
    please help,

    #711335
    liorsade8

    and also the theme’s hamburger is showing…
    if i put the regular code i have:

    .menu-toggle .mobile-menu,
    .menu-toggle:before {
    display: none;
    }

    it’s destroying the entire navigation…

    #711487
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It seems to be working for me?: https://www.screencast.com/t/pbub16aJMUv5

    What kind of downsizing issues are you having?

    #711689
    liorsade8

    hi dave,
    no.
    try to put the page breakpoint more than 768px till 1180px
    and you will see that it’s not appearing.
    please help
    thanks

    #711964
    Tom
    Lead Developer
    Lead Developer

    You can tell the mobile header to kick in at a higher width with this code: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

    Just adjust the 768px to 1180px.

    #711967
    liorsade8

    great man!
    it’s working!
    once again GP guys, u are awesome!

    #711969
    liorsade8

    hi… no… sorry…
    the menu is disappearing once clicked…
    check it please

    #711971
    liorsade8

    hi
    it’s because of this code:

    .main-navigation:not(.slideout-navigation) .main-nav > ul {
    display: none;
    }

    i removed it and it’s working.
    is it ok?

    #711973
    Tom
    Lead Developer
    Lead Developer
    #711974
    liorsade8

    great

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