site logo alignment

  • Unknown's avatar
    childoftheearthcic · Member ·

    hi. i am trying to move my site logo and tagline so they are aligned with my site title, to the left of the title. at the moment the logo is above the title. I have tried various css from other similar topics and none seem to be working for me. Thanks for you help.

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

  • staff-totoro · Staff ·

    Hi there,

    I understand you want to align your site logo and tagline with the site title, to the left of the title, but the current CSS modifications aren’t working. It appears your site now has the logo aligned with the title text on the left. Is this the desired outcome, or would you like further adjustments? If you’re seeking a different layout, could you please describe the specific arrangement you’re aiming for?

    For additional guidance, here’s a helpful link about customizing CSS: https://wordpress.com/support/custom-design/editing-css/

    Please let us know how we can help further.

  • Unknown's avatar
    childoftheearthcic · Member ·

    hi there

    thanks for your reply. the new URL is https://childoftheearth4.wpcomstaging.com/

    to be more clear: I would like to align the logo with the site title and tagline, so the result is the title and the tagline on top of each other, with both to the right hand side of the logo. Ideally the title and tagline would be aligned to the bottom of the logo image.

    I hope this makes sense?

    Thanks for your help

  • Unknown's avatar
    childoftheearthcic · Member ·

    hi

    thanks for your reply. New site URL here: https://childoftheearth4.wpcomstaging.com/

    To be more clear with my request: I want the logo to be aligned with the title and tagline. I want the title and tagline to be above one another (as they are now) and for both of these elements to be to thr right hand side of the logo. Ideally the text elements would be aligned to the bottom of the logo image.

    I hope this makes sense.

    Thanks for your help

  • Unknown's avatar
    helper-heroponriki · Member ·

    Thanks for that! Theme changes of this nature are outside the scope of support we can provide, but I can get you pointed in the right direction to get started!

    It looks like you’re using the Barnsbury theme, which is a child theme of Varia, which uses a grid-based header. The grid header for Barnsbury looks like this:

    @media only screen and (min-width: 560px) {
    .site-header {
        align-items: center;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-column-gap: 16px;
        grid-template-areas:
            "site-logo site-logo"
            "site-title social-navigation"
            "site-description main-navigation";
    }
}

    The grid-template-areas is the part that we recommend focussing on to rearrange header items. This might go against the way you approach CSS because we are targeting a parent element rather than the thing we want to move, but go with it!

    In the grid-template-areas property each set of quotes represents one horizontal track (or row) of the grid, and each name separated by a space is a vertical track (or column). For example, this CSS would create a “three column” header moving the Site Title and Description to the middle of the header: 

    @media only screen and (min-width: 560px) {
    .site-header {
        grid-template-areas:
            "site-logo site-title main-navigation"
            "site-logo site-description social-navigation";
        justify-content: space-between; /* optional depending on the size and placement of user's header elements */
    }
}

    You can replace justify-content: space-between; with grid-template-columns: 100px auto auto; to move the title closer to the logo.

    To have a different arrangement, here are some pointers:

    • target the selector .site-header and the property grid-template-areas whenever possible
    • don’t abandon grid areas even if the user doesn’t have content in them at the moment (e.g., don’t leave social-navigation out of the modified grid if they don’t have one), use your best judgement to place it just in case they use it in the future
    • match the theme’s original media queries (i.e., most if not all Varia child themes put the grid header CSS inside @media only screen and (min-width: 560px) { ... })
    • target individual elements, such as .main-navigation, to change alignment using the justify-self property

    I hope that helps you get started!

  • The topic ‘site logo alignment’ is closed to new replies.