[Support request] Adding buttons and other elements into the main header

[Rich]

Hi,

I’m wanting to add a phone number and buttons to the main header of my website. Currently, I have the logo left aligned through the ‘customize’ tool. The example I want to try and achieve is similar to the header on this site: https://www.acornstairlifts.co.uk/

So … Logo – phone number – button – button.

I created a hook and managed to get a button to appear in the header using ‘generate_after_header_content’ but I couldn’t figure out how to style this so that I achieved a similar header to the Acorn example above. Or would you recommend using a block element as the site header for this type of layout?

I am new to GP and have come from a theme builder background on Divi. I know I can achieve this through Elementor Pro but realise this slows the site down. However, I am more of a designer than a coder so just wondering what you’d recommend for perhaps a happy medium between the two?

Thanks in advance.

[David]

Hi there,

can you confirm the user and password as that didn’t work for me

[Rich]

Hi David,

Apologies, try with the details attached.

Thanks.

[Ying]

Hi Rich,

In this case, I would recommend using the block element instead. Block element is actually the block version of the hook element.

You can build the buttons with your desired style in the block element, then choose hook as block type, choose generate_after_header_contentas hook.

[Rich]

Hey,

I’ve got my 3 column ‘call – button – button’ layout in a block element as a hook block type. I’ve also set the hook name to ‘after_header_content’.

This now sits next to the site wide logo on the right. How do I get the 3 column hook to float over to the far right hand side of the header container please? (i.e. hook { float: right;})

Thanks.

[Ying]

Try this CSS:

.inside-header .wp-block-columns {
    margin-left: auto;
}

[Author]

Posts