Site Header Phone + Donate button

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.

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

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 :)

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 :)

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

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.

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

You're welcome

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!

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.

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

and possibly the addition of the Phone icon?

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

Once you've added all in, David can help with the CSS :)

Thanks Leo - that's now done.

cheers