[Support request] Hambuger menu top bar

Home Forums Support [Support request] Hambuger menu top bar

Home Forums Support Hambuger menu top bar

Viewing 15 posts - 1 through 15 (of 39 total)
  • Author
    Posts
  • #1853236
    Andrew

    Hello is it possible to have the hamburger menu added to the top bar on MOBILE only?
    https://aj4113.wpengine.com/ <== example site im trying to replicate
    https://mismiledev.wpengine.com/ <==new site

    #1853541
    Elvin
    Staff
    Customer Support

    Hi Andrew,

    The reference site has 2 separate headers. 1 for desktop and 1 for mobile.

    We can replicate this by enabling the mobile header.

    You then hook in the icons on generate_inside_mobile_header and re-add the contact number on mobile through generate_after_mobile_header_menu_button.

    Let me know once you’ve hooked things in so I can re-check the site and write the appropriate CSS for you. 😀

    Note: Contact number details have to be added twice. One on Header widget, another through a hook.

    A wise man once said:
    "Have you cleared your cache?"

    #1860264
    Andrew

    Sorry for the late reply, I have added the icons for generate_inside_mobile_header, now I am curious as to how to do hook the hamburger menu up above, or is this just done via CSS? Any help would be greatly appreciated! Also what breakpoint is the mobile header come on at? That way I can hide the other items I don’t want

    #1860351
    David
    Staff
    Customer Support

    Hi there,

    what am i missing as the two links look the same to me ?

    Mobile breakpoint is 768px.
    But you can set your own size in Customizer > Layout > Primary Navigation.

    #1860362
    Andrew

    Hi David, its for the mobile header, I’m trying to replicate this one please take a look on mobile, and thanks in advance for any help it is much appreciated!

    https://mismile.com/ <== Live Site

    https://mismilestaging.wpengine.com/ <== New Site

    #1860676
    David
    Staff
    Customer Support

    Well that was dumb of me – sorry about that.
    Can you disable the Mobile Header and ill provide some CSS to configure the mobile layout.

    Will you also need the phone and text content below the logo.

    #1860868
    Andrew

    No problem at all I appreciate the help! I have the icons currently hooked in using the “generate_inside_mobile_header”, so if I deactivate the mobile header they will disappear, do you recommend using another hook if I deactivate the mobile header? Thank is advance for your help, I greatly appreciate it, your guys theme is by far the best one I have ever used, along with the customer support!

    #1860879
    David
    Staff
    Customer Support

    The Element your using to add the Call or Text. Within that you could also include the Mobile Items.
    Then you can set which ones to display on which device using the GP hide-on-* classes:

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    By selecting a block and in the Advanced > Additional CSS Class(es) field you can add one or more of those classes to hide / show the elements for different screen sizes.

    That would eliminate the need for more hooks and the Mobile Header.

    #1861328
    Andrew

    Sounds good thanks this is what I got so far now. Im going to need to add the icons one more time underneath, I wasn’t sure if I would be better off to use a hook for that or add it again like I did for the first set of social icons, from a performance standpoint.

    https://mismilestaging.wpengine.com/

    #1861776
    David
    Staff
    Customer Support

    Yeah i would hide the desktop ‘call or text’ elements on mobile. And for mobile hook in the other content below the header.
    Performance wise – its all fine we’re only adding minimal HTML and CSS.

    let us know once thats in place and i can work on the CSS.

    #1861798
    Andrew

    Would generate_generate_after_header be the hook I would need then, just add the following classes to the html? hide-on-desktop hide-on-tablet. Just wanted to make sure I was doing it the most efficient way, and thanks again for all the help David, I truly appreciate it!

    #1862306
    David
    Staff
    Customer Support
    #1862520
    Andrew

    Great, thanks I have added it now could you please take a look when possible

    #1862526
    Andrew

    You will see I still ahve the three icons below the logo next to the search icon, would I be better off to hide those on mobile and hook into before header?

    #1862825
    Andrew

    I think I have mostly got it now, at this point Im just wondering how I hook the hamburger menu to the top now. Also when I add a hide-on-tablet hide-on-mobile class to the following it doesnt work for some reason

    Search Bar Code Below

    add_action( ‘after_setup_theme’, function() {
    remove_action( ‘generate_inside_navigation’, ‘generate_navigation_search’ );
    remove_action( ‘generate_inside_mobile_header’, ‘generate_navigation_search’ , 1 );
    add_action( ‘generate_before_header’, ‘generate_navigation_search’ );
    });
    add_filter( ‘generate_navigation_search_output’, function($form) {
    $form = sprintf(‘
    <form method=”get” class=”search-form navigation-search” action=”%1$s”>. <=========== I tried adding hide-on-mobile to this after the navigation-search and it didnt work

    <span class=”search-title”>Start typing and press enter to search</span>
    <input type=”search” class=”search-field” value=”%2$s” name=”s” title=”%3$s” />
    <span class=”search-item menu-item-align-right”>%5$s</span>

    </form>’,
    esc_url( home_url( ‘/’ ) ),
    esc_attr( get_search_query() ),
    esc_attr_x( ‘Search’, ‘label’, ‘generatepress’ ),
    esc_attr__( ‘Close Search Bar’, ‘generatepress’ ),
    generate_get_svg_icon( ‘search’, true )

    );
    return $form;
    });

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