[Resolved] Difficulties fixing the mobile header

[Leonardo]

Hello how are you?

I’m having great difficulties fixing the mobile header of a website.

The way I want to leave it is in this image: http://formuladiecast.leonardomarioto.com/wp-content/uploads/2022/06/menu_mobile.png

ie: a mobile menu hamburger in the X in yellow / Logo / login and cart icons

However, Generatepress’s pre-registered forms don’t allow me to do that.

So, I decided to create a new Hook Header. However, I’ve already tried to use several menu plugins (shotcode or widget) but none satisfy me.

Do you have any suggestions for my problem? I’d love to use the Generatepress Off Canvas Menu, but it’s not possible to add it as a shortcode or widget in a given block.

Or is it?!

[Ying]

Hi Leonardo,

Please refer to the screenshot below:
https://www.screencast.com/t/n9FwHQoexrp

1. Part A: it can be achieved using a block element – hook, choose before_header hook.

2. Part B: you can use a filter to change the default hamburger icon to a custom one (menu-bars)
https://docs.generatepress.com/article/generate_svg_icon_element/

3. Part C: you can add the account icon using a block element – hook, choose menu_bar_items hook.

If you need further help, please link us to your site.

[Leonardo]

Hey!

See, I’ve already created these parts. However, I can’t create hamburger menu (which opens off canvas) there on the left side on mobile.

Data to access the site privately.

[Leonardo]

PS: What I’m missing is just to add the hamburger mobile off canvas menu there where you marked B.
The problem is: how to do it…

[Fernando]

Hi Leonardo,

The menu is not appearing because you’re using a Block Element as a header.

You would need to hook the mobile menu toggle to your custom Header – Block Element to make it appear.

First, you’ll need to create a portable shortcode. Add this PHP snippet:

function your_shortcode($atts, $content = null) {
      ob_start();
      do_action('your_hook_name');
      return ob_get_clean();
}
add_shortcode('shortcode_name', 'your_shortcode');

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Then, add a Shortcode Block to your Block Element and add [shortcode_name] to the block as such: https://share.getcloudapp.com/E0uyzKbJ

It may be good to put the Shortcode Block within a Container Block for styling purposes.

Then, add this PHP snippet through Code Snippets:

add_action( 'after_setup_theme', 'move_my_menu_toggle' );

function move_my_menu_toggle(){
	remove_action( 'generate_before_navigation', 'generate_do_header_mobile_menu_toggle' );
add_action('your_hook_name', 'generate_do_header_mobile_menu_toggle' );	
}

Lastly, add this CSS code in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
	nav#mobile-menu-control-wrapper {
		display: block;
	}
}

Kindly let us know how it goes.

[Leonardo]

Hello, after making some changes, I’m facing other difficulties to adjust the header on mobile.

On desktop it looks like this: http://formuladiecast.leonardomarioto.com

These menus next to the logo are configured as secondary menus. When it goes to mobile, add it all up, leaving only the big logo.

If I activate the header for mobile, everything gets even weirder.

The way I would like to leave it on mobile would be:

Burger Menu Of Canvas (left) | Logo (center) | 2 Cart and User icons (on the right).

Would there be any way to shed some light? I am sending access to the site in private.

Thank you so much for your help as always. You are always very considerate.

[Fernando]

Hi Leonardo,

With regards to the Secondary Nav not appearing on Mobile, there’s a code in Appearance > Customize > Additonal CSS causing this:

.secondary-navigation {
         display: none;
}

If you remove this, the secondary nav would appear.

You also don’t have an Off Canvas menu set in Appearance > Customize > Menus. And, you’ll need to set a Navigation location for the Primary Navigation to make the Off Canvas Menu work.

What you can do is set the Primary Navigation’s navigation location to float left, and then we can hide it on Desktop through CSS.

You can also just add the Icons through Appearance > Widgets > Header instead of adding it through the secondary navigation so you can use the 2nd nav for something else if needed.

Then after you’ve done the changes, we can use custom CSS to align the logo, hamburger menu, and icons to your liking.

So, to reiterate, one approach is to:
1. Set Primary Nav’s nav location to float left
2. Add Icons Account, Cart and Checkout through the Header Widget
3. Set up an off Canvas menu in Appearance > Customize > Menus
4. Use necessary CSS to hide and move stuff.

Hope this clarifies!

[Leonardo]

Hello Fernando!

Thanks for the answer.

So, I tried to follow your steps… Let’s go:

As you can see in the image (http://formuladiecast.leonardomarioto.com/wp-content/uploads/2022/06/header.jpg) we have these 3 divisions.

1 – Menu, however added via MegaMenu shortcode – this should go where the logo is. It should also be hidden on mobile, that is, it should appear in the right corner only on desktop and tablet;
2 – Primary menu configured as off canvas to the left of the logo – this should be hidden on desktop and tablet, that is, it should appear in the left corner only as menu off canvas mobile;
3 – Logo – this should appear in the left corner on desktop and tablet; on mobile, it should be in the middle, between the off canvas menu on the left and a new 4 element that I want to see later.

Note: this 4 element would be number 1 (Cart, My Account and Checkout), but only the icons, as it will be on mobile and will not be able to occupy the screen as much.

Summarizing the order the elements should be in, from left to right:

Desktop: 3, 1
Mobile: 2, 3, 4

Phew… I hope you can understand!

[Fernando]

I see. Thank you for explaining vividly, and adding a screenshot.

To hide #2 on desktop, kindly add this CSS in Appearance > Customize > Additional CSS:

@media (min-width: 1025px) {
    div#primary-menu {
        display:none;
    }
}

If however you want it to hide on both Desktop and tablet, add this instead:

@media (min-width: 769px) {
    div#primary-menu {
        display:none;
    }
}

Then, can you instead set the Primary Nav’s nav location to float right instead? We’ll make the off canvas Hamburger button move to the left on mobile through custom CSS instead. This would be easier.

Kindly let us know once you’ve made these changes, and then we’ll proceed with the next steps.

[Leonardo]

Fernando, perfect!

I was here fighting to see the exact measurement, I arrived at 770, lol. Only after I saw that you had indicated 769px. But it worked!

Wow!

See how it turned out: http://formuladiecast.leonardomarioto.com

Now, I have to pass both elements to opposite sides that are on desktop and tablet.

Logo for the far left and shortcode menu for the far right.

[Leonardo]

Help me, please…

[Fernando]

Great! Now, can you set the Primary Nav’s navigation location to float right?

Kindly let us know once it’s done, then we’ll see what CSS is needed for the mobile view.

Hope to hear from you soon!

[Leonardo]

Fernando, done.

Desktop and tablet are OK.

For mobile, I want:

1) put the menu off canvas on the left;

2) leave the logo in the center (but reduce its size a little, so that the elements fit correctly);

3) hide that shortcode megamenu that appears on desktop and tablet (my cart, user and maybe checkout);

4) add two or three icons only (my cart, user and maybe checkout) to the right of the logo.

Thanks.

[Fernando]

I see. For number 4, can you add these through the Header Widget as well. Example: https://share.getcloudapp.com/jkuXL1Qq

Then we can hide them on Desktop.

There’s also a Cart Icon which can be Activated in Appearance > Customize > Layout > WooCommerce: https://share.getcloudapp.com/wbuXwNW4

We can do 1, 2 and 3 after 4 has beed added.

[Leonardo]

Please see how it is on mobile.

[Author]

Posts