Archived topic
Custom page header not showing correctly
7 replies · Started by johnno43 on October 17, 2017
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
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/
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
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/
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?
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;
}
}Thanks Leo it worked like a charm
Regards
John
Glad I could help!
