Site logo

Archived topic

Columns in the Header

4 replies · Started by Tomasz on January 14, 2017

Viewing posts 1–5 of 5

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

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

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

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

This archived topic is closed to new replies.