[Resolved] Header Logo Right justified and Tagline Bottom Left Justified

Home Forums Support Header Logo Right justified and Tagline Bottom Left Justified

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #342874
    Randy

    Hi Everyone,

    Seems like its always the header, the first thing a client sees, is the thing that always needs the tweaking to get it exactly the way they want it. 🙂

    In this case it is the logo right justified and the tagline left justified with both of them aligned on the bottom. Like this …

    ………………………………………. | LOGO Graphic |
    ………………………………………. | LOGO Graphic |
    ………………………………………. | LOGO Graphic |
    Site Tagline ………………….. | LOGO Graphic |

    – I hid the site-description.
    – I set header alignment to right – this keeps the logo on the right.

    I’m having trouble getting the tagline on to the bottom left of the header area.

    I’ve found and attempted to add some Additioinal CSS to do this, but it isn’t doing the trick.


    @media
    (min-width:769px) {
    .site-branding {
    display: inline-block;
    }

    .site-description{
    float: bottom;
    margin-right: 20px;
    }
    }

    I know just enough CSS to break things. There are likely several ways to accomplish what I want, I’m just looking for one.

    If someone could point me in the right direction that would be greatly appreciated.

    Thanks,
    Randy (aka Crane358)

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #342885
    Leo
    Staff
    Customer Support

    Hi there,

    So you are wanting to add 4 logos on the right side and tagline on the left?

    #342926
    Randy

    Sorry, no. Just 1 logo graphic. That was my lame attempt at doing an ascii-text representation of what I would like.

    I guess the proper way to describe it is that I want the tagline bottom left justified and the logo bottom right justified. Make sense?

    Here’s an image I stuck on my wwebsite to help.
    Header Bottom Left and Bottom Right Justified Elements

    Regards,
    Randy (aka Crane358)

    #342934
    Leo
    Staff
    Customer Support

    Ahh I see. Let’s try to use the before header content hook:
    http://demo.generatepress.com/hook-locations/
    https://docs.generatepress.com/article/hooks-overview/

    Add something like this:

    <div class="grid-50 header-left">
        <div class="site-branding">
            <p class="site-description">Site description</p>
        </div>
    </div>
    <div class="grid-50 header-right">
        <div class="site-logo">
            <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home">
                <img class="header-image" src="URL TO YOUR IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME">
            </a>
        </div>
    </div>

    Also need to remove the logo and description from Site Identity

    #343025
    Randy

    Thanks so much for your help Leo.

    It’s very close except the description is aligned at the top instead of the bottom.

    I blasted together a quick WP site to test …
    http://greatbear.ca/beta.greatbear.ca/

    I guess I need some CSS to tell it to go to align bottom. Maybe this? (I’m pretty rusty on my CSS).

    vertical-align: bottom;

    Regards,
    Randy (aka Crane358)

    #343033
    Leo
    Staff
    Customer Support

    Ahh yeah forgot to give you the CSS. Changing vertical position is always tricky.

    @media (min-width:769px) {
        .header-left {
            padding-top: 200px;
        }
        .header-right {
            text-align: right;
        }
    }
    #343061
    Randy

    Thanks again Leo. That works.

    Eventually I would like to find something that it is a bit more responsive in that it avoids a hard coded padding but this will get me going for now.

    Regards,
    Randy (aka Crane358)

    #343120
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.