🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

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

Home Forums Support Phone Number In Header Beside (or in) Menu

  • This topic has 10 replies, 4 voices, and was last updated 5 months ago by Len.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1133557
    Henk

    Hi I’m trying to get a phone number in the header (or menu) along these lines
    01.16.2020-12.12.38

    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

    #1133860
    David
    Staff
    Customer Support

    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.

    #1134494
    Henk

    Yes would like it displayed on mobile

    #1134926
    David
    Staff
    Customer Support

    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.

    #1136451
    Henk

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

    #1136694
    David
    Staff
    Customer Support

    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

    #1138587
    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.

    #1139301
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #1141302
    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

    #1141582
    David
    Staff
    Customer Support

    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

    #1148066
    Len
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.