Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Custom page header not showing correctly

Home Forums Support Custom page header not showing correctly

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #405157
    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

    GP Premium 1.4.3
    #405213
    Leo
    Staff
    Customer Support

    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/

    #405828
    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

    #405926
    Leo
    Staff
    Customer Support

    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/

    #407837
    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?

    #407989
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #408009
    johnno43

    Thanks Leo it worked like a charm
    Regards
    John

    #408047
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.