Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Is it possible to make header widget display below logo on narrow screens?

Home Forums Support Is it possible to make header widget display below logo on narrow screens?

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #38449
    Henry Miller

    Currently when the header reconfigures for narrower devices, the header widget displays above the header logo.
    What would it take to make the logo display on top?
    And by the way, thank you for the excellent theme. I am enjoying using it very much.

    #38451
    Tom
    Lead Developer
    Lead Developer

    Hmm, tough one – but possible using GP Hooks.

    1. Go into the Customizer, and remove your logo.
    2. Go into “Appearance > GP Hooks” and into the “Before Header Content” area.

    Paste this into the area:

    <div class="site-logo">
          <a rel="home" title="YOUR WEBSITE TITLE" href="YOUR HOMEPAGE URL"><img title="YOUR WEBSITE TITLE" alt="YOUR WEBSITE TITLE" src="THE URL TO YOUR IMAGE" class="header-image"></a>
    </div>

    That should do it 🙂

    #38452
    Henry Miller

    So essentially I would be removing all content from the header and reinserting it in a new container using the add on?

    #38453
    Tom
    Lead Developer
    Lead Developer

    Correct.

    You would be removing the logo added by the Customizer, and re-adding it above the header widget in GP Hooks.

    #38454
    Henry Miller

    OK, got it. Thank you Tom!

    #38455
    Tom
    Lead Developer
    Lead Developer
    #80367
    shantel

    Would you please consider making this change as part of the theme by default? Its pretty standard to have the logo above or on the right-side of the site-title/tagline anyhow. Speaking of, it would also be nice if we could select a logo position alignment (top & right-side) in the header section. Just a thought. Thanks so much!

    #80368
    shantel

    *correction*
    Left-side

    #80557
    Tom
    Lead Developer
    Lead Developer

    I’ll definitely look into it.

    Moving it below the site title/tagline/logo and floating it to the right would require the title/tagline/logo float to the left, which may cause issues with users using the theme.

    I’ll have to make sure no issues will arise before including it there by default.

    Thanks!

    #107371
    Tom Hottinger

    Dear Tom,

    I’m currently stuck because I’m trying to put a Headerwidget next to the Logo

    Is there an easy way to do this?

    Thanks!

    Tom

    #107435
    Tom
    Lead Developer
    Lead Developer

    Hi Tom,

    The header widget should be next to your logo by default.

    Can you link me to your site?

    Thanks!

    #152953
    Paul

    Just seconding the call to have the header widget below the site logo in the mobile view by default. For example, I have a search box in my header, which is probably pretty common. It currently sits above my logo and looks less than ideal.

    I’ll maybe try the header hook, but agree with Shantel that this is likely preferred behavior for most use cases.

    #153028
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I agree, can you try this CSS and let me know if it works? If so, I’ll most likely add it to core.

    @media (max-width: 768px) {
        .inside-header {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-flow: column;
        }
        .site-branding {
            order: 2;
            -webkit-order: 2;
        }
        .site-logo {
            order: 3;
            -webkit-order: 3;
        }
        .header-widget {
            order: 4;
            -webkit-order: 4;
        }
    }
    #153036
    Paul

    Hey Tom.

    Thanks for that. I am currently using the “Before Header Content” hook, but I’ll give your CSS approach a try too!

    Cheers!

    #153143
    Tom
    Lead Developer
    Lead Developer

    Cool let me know how it works out 🙂

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