[Support request] Hambuger menu top bar

[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

[Elvin]

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.

[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

[David]

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.

[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

[David]

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.

[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!

[David]

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.

[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/

[David]

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.

[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!

[David]

Thats right.

[Andrew]

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

[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?

[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;
});

[Author]

Posts