[Support request] Tap to call phone number

[Olga]

Hello,

I would like to add a big orange phone number to the very right of the main menu, and make it clickable to make calls from mobile phones.
On the mobile view, I would like the number to remain central between the menu burger and search, rather than disappearing into the menu burger. How do I go about this?

http://www.cobbletales.com

Best,
Olga

[Leo]

Hi there,

Use a custom link in the menu with the these two CSS classes: menu-item-float-right hide-on-mobile
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
https://stackoverflow.com/questions/13662175/how-to-create-hyperlink-to-call-phone-number-on-mobile-devices

Then add it again as normal HTML in mobile header:
https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

[Olga]

Thank you Leo,

got the phone onto the menu and its clickable. What css class needs to be added to control colour, font type, and size please?
Also, is there a way to have the number on the very right without upsetting the centralisation of the rest of the menu?

For the mobile menu, pasted the php into code snippets but not sure what to enter where it says”Your mobile header HTML in here”?

[Leo]

You can use similar method here to control to add CSS:
https://docs.generatepress.com/article/adding-buttons-navigation/

You added menu-item-float-left. Try menu-item-float-right as suggested above.

It would be the same HTML you entered in the menu.

[Olga]

I put it right first and it looked like a mess, so I put it to the left temporarily so it does not unbalance everything.

When I added the html for the mobile view in code snippets, it just kept giving me an error screen when activated…

[Leo]

Hmm menu-item-float-right shouldn’t unbalance things as it’s a floating element.

This is what I see when I change it: https://s26.postimg.org/nadz43hmx/floatright.png

Can you show me the code you are adding?

[Author]

Posts