Moving text next to logo

  • Unknown's avatar
    spraguechoirs · Member ·

    I would like to move the text “Sprague Choirs” up and in line with the school logo above it and then reduce the vertical margins between the header and the logo. Any help is appreciated.

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @spraguechoirs!

    Try adding the following CSS under My Site > Customize > CSS

    /* move title next to logo on larger screens*/
@media screen and (min-width: 1020px) {
.site-logo-link, .site-title {
    float: left;
    clear: none;
}

.site-logo-link:not([style*="display"])+.site-title {
    margin: 100px 0 0 20px;
}

.site-logo-link {
    margin-bottom: 0;
}
}

/* remove bottom margin from site title */
.site-title {
    margin-bottom: 0;
}

    It’s set up to shift the logo and title to be side by side on large screens like laptops, but not on smaller ones like tablets/phones, where the title would probably run into the menu button.

    It also eliminates that empty space below the site title you mentioned :)

  • The topic ‘Moving text next to logo’ is closed to new replies.