[Resolved] Header on Mobile tagline underneath logo

[David]

Hi there,
I am displaying a logo 250×40 px plus the tagline (title hidden as it is also part of the logo) in the header.
The primary navigation is underneath the header
This works well on desktop and tablet.
However, on mobile, the tagline breaks into several lines and the logo gets resized (made smaller). This creates a rather awkward looking header.

I would like to ask help for the following:
How can the tagline made to appear underneath the logo if it doesn’t fit next to it.
In other words, how can the tagline be moved underneath the logo for mobile screens only?

If this is not possible,how can the tagline be hidden on mobiles only?

(Mobile header doesn’t solve the problem as the logo looks awkward when combined with the navigation / colors don’t match)

Thanks a lot for taking the time.
All the best.

[David]

Hi there,

can you share a link to your site so i can take a look to see if its possible.
You can edit your original topic and use the site URL field to share privately.

[David]

Hi David,

I have just added the link. This is a test site where I customize the theme before moving it to the real site. But I have uploaded the real logo and tagline.
In the meantime, I have been able to at least get the tagline down from three to two lines by reducing the padding to 20 px.
Thanks.

[David]

Try this CSS:

@media (max-width: 768px) {

    .site-branding-container {
        display: block;
    }
    .site-branding {
        margin-left: 10px;
    }

}

[David]

Hi David,
this looks nice indeed.
The only thing is that now the tag line is underneath the logo (left-aligned) on an iPad (portrait) as well.
But I can live with this if this can’t be separately controlled?

[David]

Looking at it again, this looks nice. I’ll just use it like this on an iPad as well.
Thanks a lot for you help.

[David]

Awesome glad to be of help.
If you did want to change it then simply reduce 768px here:

@media (max-width: 768px) {

Dropping it to 600px for example would mean it only applies to mobiles and the very smallest of tablets.

[Author]

Posts