[Support request] Columns in the Header

[Tomasz]

Hi Mates,

Can you help me, I have no idea how to devide in GP Premium the header into for example three columns to make for example:

On the left – logo
In the middle – for example phone number
On the right – address of the office

Thanks for your help in advance

Tom

[Jamal]

Hi

You will need to use GP Hooks i think, see this topic https://generatepress.com/forums/topic/2-sides-to-the-header-widget/#post-228923

[Tomasz]

Thanks for you reply. Do you know also if it works when I would like to devide for example section or another element like footer?

Tom

[Jamal]

It’s built into the theme so should work in sections and also the footer. See http://unsemantic.com for more grid classes.

[Lyle]

Hi Tomasz, Jamal,

Here is a way to do it with CSS. Note that there will have to be additional CSS for mobile, but desktop it’s fine 🙂

– add two text widgets to the Header Widget area and put the desired info in each one
– add a unique div to each text block as below for example:

<div id="tagline">Unit 42 - 1030 Main Street</div>
<div id="tagline2">Phone: (555) 555-1212</div>

– then add this CSS via Tom’s Simple CSS plugin 🙂

#tagline {
    font-size: 28px;
    text-align: right;
    color: #0080c0;
    margin-top: 27px;
}

#tagline2 {
	margin-top: -82px;
    color: red;
    font-size: 28px;
}

.header-widget {
    width: 70%;
        max-width: 80%;
}

Adjust the values as required and again, you will need additional CSS for the various mobile widths, but this is a start 🙂

Cheers!
Lyle

[Author]

Posts