[Resolved] Header on Mobile tagline underneath logo

Home Forums Support Header on Mobile tagline underneath logo

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1101646
    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.

    #1101870
    David
    Staff
    Customer Support

    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.

    #1101887
    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.

    #1101965
    David
    Staff
    Customer Support

    Try this CSS:

    @media (max-width: 768px) {
    
        .site-branding-container {
            display: block;
        }
        .site-branding {
            margin-left: 10px;
        }
    
    }
    #1101983
    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?

    #1101988
    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.

    #1102001
    David
    Staff
    Customer Support

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.