Logo above Title and Subtitle

Iam flexible.
A good looking alternative is ok.

But all i try has some new issues.

1) Logo left from Titles is disgusting at mobile
2) special settings for mobile: i can just select logo OR titles.
3) using flexbox i have other issues and so on...
.
.
.
Thanx

Hi Peter,

Where would you like the Facebook icon to be? Mobile and desktop.

Let me know :)

Hi Ying.

desktop: like now (RIGHT SIDE) would be great, just logo above the titles.
mobile: would be great, if this widget appears UNDER the logo and title.

just 1 idea for both:
the logo should be inside the round-corner-box with the titles?!
(simply use that round-corner box and inside: site-logo centered, main-title centered, site-description centered)

that would be great!

best regards

You could give this CSS a try:

Desktop:

.inside-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}
.site-branding {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px; /*adjust the number for desktop*/
}
.site-logo {
    order: -1;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 769px) {
    .header-widget {
        position: absolute;
        right: 0;
    }
}

For mobile:

@media (max-width: 768px) {
    .header-widget {
        position: relative;
        order: 3;
    }
    .site-branding {
        margin-top:0; /*adjust this number for mobile*/
    }
}

After adding this CSS, you'll find the header is overlapping with the content on mobile, then go to Appearance > elements, find the header element assigned to Frontpage, increase its padding-top and padding-bottom for mobile, test the value until it looks good to you :)

Let me know how it goes!

Thank you Ying.
Its PERFECT now and I dont have to change anything!
Really excited!!!

Just a question to learn: To put the logo inside of the rounded-corner-box within the titles, than i need to use the child-theme because i have to touch html-markup? Is this correct? Flexbox wouldnt work? Right?

All the best!
Peter

Hi Peter,

Glad to hear that :)

To put the logo inside of the rounded-corner-box within the titles

It can be achieved with some CSS visually.

For desktop:
1. Change below CSS:

.site-branding {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px; /*adjust the number for desktop*/
}

to:

.site-branding {
    margin-left: auto;
    margin-right: auto;
    margin-top: -60px; /*adjust the number for desktop*/
    padding-top: 60px important;
}

2. Change this CSS

.site-logo {
    order: -1;
    margin-left: auto;
    margin-right: auto;
}

to:

.site-logo {
    order: -1;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
}

For mobile:
Change this CSS:
https://www.screencast.com/t/u8nGCbgSCSrH
to:

.inside-header .site-branding {
    padding: 10px 20px !important;
    padding-top: 65px !important;
    margin-top: -75px;
}

Let me know :)