[Resolved] Site Header Phone + Donate button

Home Forums Support [Resolved] Site Header Phone + Donate button

Home Forums Support Site Header Phone + Donate button

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #1104699
    Paul

    Hi guys

    For this not-for-profit site in development, I would like to know the best way to add a Phone number (with icon) and Donate button to the right of the logo site header div (right aligned). We’re also using Elementor but suspect that keeping everything inside GP is the ideal approach (for desktop and mobile)??

    Thank you!

    #1105036
    David
    Staff
    Customer Support

    Hi there,

    you can use the Customizer > Widgets > Header Widget which by default sits to the right of the logo, to add any HTML or shortcode.

    To have it site aside the logo on Desktop would require you to disable the Mobile Header and some CSS which we can help with.

    Let me know if you need a hand with HTML for the widget or how you want it displayed on mobile.

    #1105302
    Paul

    Thanks for the quick response David. Just noticed that we can add an Elementor asset there as well. Will have a play and let you know if I need any help.

    Cheers

    #1105318
    Paul

    Hi David

    Think I’ll need a bit of your help. Am looking at the following design whereby…

    https://ibb.co/4snQ8wq

    1. Phone icon + active phone link with hover underline state

    2. CSS Donate button with hover state color and link to internal page.

    These two items would vertically align with left logo, and right align to the edge of body content underneath.

    Thank you in advance πŸ™‚

    #1106068
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Have you tried the Header Widget area that David mentioned?

    The actual content itself will require some HTML and CSS. Have you decided to throw an Elementor widget in there or do you want help with the code?

    Let us know πŸ™‚

    #1123161
    Paul

    Hi Tom, David

    Happy New Year!

    I’ve got an Elementor widget displaying in the Header but are struggling with the layout and positioning. Can I send you a private message somewhere to access the url to check?

    cheers

    #1123363
    David
    Staff
    Customer Support

    So this CSS will align the Header Widget:

    @media (min-width: 769px) {
        .inside-header {
            display: flex;
            align-items: flex-end;
        }
        .header-widget {
            order: 5;
            flex: 1;
            margin-left: auto
        }
    }

    However you will need to rethink / edit the Elementor widget to manage the alignment of icon and text for example. Hint: Using the Elementor Heading Widget instead of the Text Widget removes the bottom margin which is currently causing the vertical alignment problem.

    #1124243
    Paul

    Thank you David, much appreciated. Took your advice on the Heading Widget, messed around with column widths etc and got it performing pretty well.

    Cheers

    #1124468
    David
    Staff
    Customer Support

    You’re welcome

    #1126426
    Paul

    Hi David

    Another special request for you re above header/menu tweaks!

    On mobile display I would like to…

    1. Include the phone number to right of logo.

    2. Move the “Menu” label to beneath the hamburger icon as per this layout.

    https://www.getintheloop.com.au/wp-content/uploads/2020/01/mobile002.jpg

    Is this possible?

    Thank you!

    #1126510
    David
    Staff
    Customer Support

    You will need to add the phone number to the mobile header using the inside_mobile_header hook:

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

    Once it is in place we can take a look at the CSS for the styling etc.

    #1127375
    Paul

    Hi David

    I’ve got that hook working on mobile. As you can see some layout and styling needs to be done if you could possibly help on that?

    Cheers

    #1127376
    Paul

    and possibly the addition of the Phone icon?

    #1127378
    Leo
    Staff
    Customer Support

    For the icon, you can consider using FontAwesome or an SVG icon.

    Once you’ve added all in, David can help with the CSS πŸ™‚

    #1127381
    Paul

    Thanks Leo – that’s now done.

    cheers

Viewing 15 posts - 1 through 15 (of 28 total)
  • You must be logged in to reply to this topic.