Ethos Template > Desktop Menu Phone # > Burger Menu Mobile & Tanlet

Hi there,

You can create and design your button on a Block Element and then hook it on generate_inside_mobile_header hook.

After hooking it, you can style the alignment using custom CSS. :D

Would you mind giving a specific example on how to do it?

Can I use the "phone" element that was already defined in the Navigation menu by the Ethos template?

Can I use the “phone” element that was already defined in the Navigation menu by the Ethos template?

You can't unfortunately. This is because the one you see on desktop is added through Appearance > Menus as a menu item.

If you want something to show up on the space on the header area of Ethos which uses mobile-header by default, you'll have to manually hook in things.

Example:

Go to Appearance > Elements. Click "Add new Element" and select "Block" from the dropdown that appears.

Create your button within the Block editor. Set the link and the styling.

You'll see something like this UI - https://share.getcloudapp.com/mXuKE9xG - copy the settings.

This will be the expected effect - https://share.getcloudapp.com/Apu9NKe6

would this method also work for tablets?

It would work on smaller tablets(the one who share breakpoints with mobile) but not on bigger ones that doesn't the mobile header. :D

Some tablet screens are real huge that they share breakpoints with desktop screens. Hence, they don't use the mobile header.:)