[Resolved] Logo Subtitle not directly under the logo

[Jakob]

Hi there,
I am using your fantastic theme in the latest version.
Before updating, I used a elements hook to have a subtitle directly under my websites logo (generate_after_header_content).
That worked perfectly.

But, since the latest update, the subtitle is right next to the logo, not directly under it!

Can you please help me out with that?

Thank you.

Greetz

[Elvin]

Hi,

Can you link us to the site in question so we could take a closer look? Thank you.

Tip: Don’t forget to purge site/server cache after every change/update. This usually fixes most of the issues.

[Jakob]

Hi Elvin,
Thanks for your quick reply!
Actually, my site is under construction and not public visible.
I found out, that this problem only happens by switching from Floats to Flexbox option.

Using the Floats-Option the subtitle is perfectly under the website-logo.
After switching to Flexbox, the subtitle appears directly right to the website-logo. I think you can reproduce that easily by using the elemnts hook and “generate_after_header_content”.

I also use this php-code in the hook: <p class=”site-description”>Subtitle</p>

Do I have to change the php-code by switching to to Flexbox?

[David]

Hi there,

whats stopping you from using the Site Description ? Let me know.

[Jakob]

Hi David,

The first reason is, that when I use the normal Site Description from the theme in Customizer, the space between the site-logo and the Site Description is to big.

The second reason is, that I become the same issue as described above by switching to Flexbox-Option.

My websites-logo is on the left and on the right I use the Lightweight Social Icons.
Directly under the websites-logo I want to use the Subtitle.

The navigation-bar I use as primary menu under the Subtitle with a little space… Just like the “classical” theme was using it.

Regards

[Leo]

The first reason is, that when I use the normal Site Description from the theme in Customizer, the space between the site-logo and the Site Description is to big.

The second reason is, that I become the same issue as described above by switching to Flexbox-Option.

Both of these issues can be solved with a bit of CSS I believe.

Any chance you can try the site description option a shot and create a staging site for the current setup so we can help with some tweaks?

Let me know 🙂

[Jakob]

Hi Leo,
enclosed you find the login-data to my demo-website.

Could you please tell me the steps when you finished?

Thanks.

Regards

[Leo]

I can’t actually modify your site for you.

So basically you want “Erfolg durch Suchmaschinenoptimierung” to be below the logo?

If so can you uncheck Hide site tagline first?
https://docs.generatepress.com/article/site-title-tagline/

[Jakob]

Yes, I want the subtitle to be below the logo.
I’ve unchecked Hide site tagline and deactivated the elements hook with the subtitle.

[David]

Try adding this CSS:

.site-branding-container {
    flex-direction: column;
    align-items: flex-start;
}
.site-branding-container .site-logo {
    margin-bottom: 0.5em;
}

[Jakob]

Yes, nearly perfect!
What do I have to change or add to this code, so that the logo and the subtitle both align to the left (start at exactly the same position on the left side)?

[David]

Is that for mobile ?

[Jakob]

No, not for mobile.
With your code above the subtitle doesn’t start at exaclty the same position on the left. It’s shiftet more to the right.

I think you can see what I mean by loggin in to my site.

[David]

Aah ok … my eyes are getting old lol
I updated the CSS here to fix that

[Jakob]

Amazing! Now it works perfekt, thank you! 🙂

[Author]

Posts