[Resolved] [Mellow] Placing site tagline below site logo

[ruzek]

Hi there!
I am just trying to setup my site tagline to appear beneath my site logo, rather than to the left, in the Customizer as shown here: http://cld.wthms.co/Mss5b3

I’ve tried editing “Home Hero” under Appearance > Elements, though the manual addition of the tagline there appears in the wrong portion of the hero.

Am I missing a setting, or is there another place to make this happen before I start editing CSS? Please note, the size of the logo might change, as this is a placeholder for the moment.

Thanks,
Jonathan

[Leo]

Hi there,

We usual recommendation is to add the tagline to the logo image itself, as the results are more consistent on multiple screen sizes/mobile.

We can try some CSS as well. Any chance you can add the tagline through customizer so I can give it a shot?

[ruzek]

Hi Leo, please take a look now. Thanks for looking into it 🙂

EDIT: One thing I did notice is that by having the logo in addition to the tagline also affects the position of the mobile menu: http://cld.wthms.co/VafZQi

While I do understand having the text in the logo is easier, I also want the site the text to be…text.

[Leo]

Try this CSS:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[ruzek]

Thanks Leo!

It placed the tagline in my desired position, though the width of the background is now full-width: http://cld.wthms.co/SmI7xR

However, I also noticed that the mobile menu overlaps the post title: http://cld.wthms.co/AlUjQT

[Leo]

Try something like this:

.site-branding {
    max-width: 200px;
    margin: auto;
}

As for the overlap, locate this block of CSS in additional CSS:

@media (max-width: 768px) {
	#page {
		margin: -75px 15px 0 15px;
	}
}

and adjust the -75px

[ruzek]

Thanks, that helped a lot! Loving GeneratePress 🙂

[Leo]

No problem 🙂

[Author]

Posts