[Support request] Learning to customize the site header design and layout

[Thomas Kjerstein]

Basically, I do not understand how you guys puzzle together a non-default “layout” of the site header in plan GPP, without using Elementor.

I have been reading GPP docs, FB forum and watching the videos, including all of GPP’s own and the ones at https://wpdesignduo.com/generatepress-video-playlists/

Basically, I understand how to make the menu float right. I understand how to change colors in the menu.

What I do not understand is:

1. How to make the site title “WordOne WordNumberTwo” line break with one word on two lines (on desktop) and give them individual font sizes, so they end up identical length in pixels in spite of differing number of characters.
2A. Making a logo appear left of the site title’s two lines
2B. How to adjust the size of the logo to correspond with the height of the site title’s two text lines (see question 1).
3. How to customize the mobile header to include the site title in one line to the right of the logo (left-aligned).

My current failing attempt: https://cl.ly/b897359290c3
+ Almost as described using an Elementor header: https://cl.ly/acbff57202cd

[David]

Hi there,

we are looking at ways to make some of these steps easier, but the variations of header people like generally leads to a little code. To re-order the logo position and force the inline header on mobile use this:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.site-logo {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    margin-right: 10px;
    width: 50px;
}
.site-branding {
    margin-right: auto;
}

But to create the line break between NORDIC and DESTINATION, is a bit trickier. You can enter a <br> tag between the two words in the Site Identity but this HTML can show up when social sharing. Personally i would design the Logo including the text and use an SVG to display it. You then have pixel perfect control that will remain static on all screen sizes. Let me know.

[Author]

Posts