[Resolved] Custom page header not showing correctly

[johnno43]

Hi Guys
I’m in need of your help again please.
I’ve got 2 images and some text i want on my page header, my GP Hooks looks like this:

<div class="grid-33 header-left">
    <a href="http://test.arnoldsofasandbeds.co.uk/"><img src="http://test.arnoldsofasandbeds.co.uk/wp-content/uploads/2017/10/cropped-arnoldsofas-logo4.png" /></a>
</div>
<div class="grid-33 header-center">
    </div><img src="http://test.arnoldsofasandbeds.co.uk/wp-content/uploads/2017/10/Made_in_Great_Britain_1.jpg" alt="" /></div>
<div class="grid-33 header-right">
   <h3><B>55 High Street,<br>
                   Arnold,<br>
                   Nottingham<br>
                   NG5 7DG<br>
                   Telephone: 0115 953 1001<br>
                   Fax: 0115 952 1787</h3></B></div>
</div>

And my CSS like this:

.header-right {
        font-size: 25px;
    color: #414141;
    text-align: right;
    padding-top: 20px
    }
}

The site im working on currently looks like this http://test.arnoldsofasandbeds.co.uk
I want it to look like this http://www.arnoldsofasandbeds.co.uk/
But with all 3 at the same height to the top of the page
Any help would be greatly appreciated

John
P.S I’m using Elementor pro plugin as well

[Leo]

Hi there,

Looks like the third grid-33 is in a different hook?

Make sure you use the exact structure here: https://docs.generatepress.com/article/split-header-three-sections/

[johnno43]

Hi Leo

Please excuse my ignorance but iv’e looked and i cant see where im going wrong.
What do you mean by “in a different hook”?

John

[Leo]

Looks like you have quite a few syntax error in there.

In header-center, you closed the </div> before inserting the image.

In header-right, looks like there is one extra </div> after the fax number.

The CSS has one extra closing bracket as well.

Best to go through them slowly and make sure each <div> only has one </div>

You can use this site to check HTML too: https://validator.w3.org/

[johnno43]

Hi Leo

Thanks for that, schoolboy error there. Works now thank you.
One more thing please if possible.
I don’t want the union jack image to appear on mobile and also i want the text on the right to be centered on mobile only. How would i achieve this please?

[Leo]

You can add hide-on-mobile class to element you want to hide on mobile: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Then use CSS to center the header-right element:

@media (max-width: 768px) {
    .header-right {
        text-align: center;
    }
}

[johnno43]

Thanks Leo it worked like a charm
Regards
John

[Leo]

Glad I could help!

[Author]

Posts