[Resolved] Phone Number In Header Beside (or in) Menu

[Henk]

Hi I’m trying to get a phone number in the header (or menu) along these lines
https://www.screencast.com/t/cITdiohe

What’s the best way of doing this – I tried the header widget but it’s sitting on top of the menu by the look of it and I tried an HTML widget in the top bar – this will do at a pinch but I would prefer to get the logo | menu | clickable phone # configuration.

It’s easy with some themes but I’m not a coder/or CSS expert and can’t work it out here but I love the theme’s speed and functionality

[David]

Hi there,

got a couple of methods, but first off can you tell me what happens to the button on Mobile Devices? Will it still need to displayed within the Header or maybe within the mobile menu. Let me know.

[Henk]

Yes would like it displayed on mobile

[David]

Ok so lets deal with the Desktop Nav first. This article explains how to make a menu item look like a button:

https://docs.generatepress.com/article/adding-buttons-navigation/

If you can follow that guide to add the Phone Number as the menu item and add the CSS class then let us know and ill provide some CSS for styling it.

[Henk]

Thanks – I’ve added it to the menu and created the custom CSS class and suggested style

[David]

Ok – so what design do you have in mind for the Mobile Header?
Choices:
1. Use the Header Widget ( which can be hidden on Desktop with CSS ) and some CSS to arrange Phone, Logo and Menu Toggle

2. Use the Mobile Header Option in Customizer > Layout > Header and then we use a Hook Element to add the Button as HTML. Info on Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

The right hook for the Mobile header would be inside_mobile_header hook

[Henk]

OK – thanks for your help so far David, you have been great but this should be much easier to do.

I’ve not been able to wait and I’m not happy with the faffing about to get what is in most themes a pretty simple thing to do. There needs to be both:
1) A better solution within the theme
2) Better documentation in the help area

Had to move on.

[Tom]

Hi there,

I agree – we’re working on an easier way to do this 🙂

[Len]

I am also looking at this exact requirement, new to the theme and have the pro version.
Not mentioned above is that when adding the phone number as a menu item, when in mobile view the menu hamburger is shown instead of the phone number.
Also, how do I get phone number to the left, and secondary menu to the right, so as Henk asked for with his image but other way round. Can the top menu bar have two menus?

I have sussed out the hook process to get the number in mobile mode, whats the process for desktop mode to get it in the secondary menu area?

Thanks,LenW

[David]

Hi there,

can you raise a new topic where you can share a link to your site as the method will vary depending on how the header / nav is setup

thanks

[Len]

New topic raised
https://generatepress.com/forums/topic/phone-number-in-header-and-secondary-menu-space/

[Author]

Posts