[Mellow] Placing site tagline below site logo

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?

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.

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 :)

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

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

Thanks, that helped a lot! Loving GeneratePress :)

No problem :)