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

[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.

[Tom]

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 🙂

[Henry Miller]

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

[Tom]

Correct.

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

[Henry Miller]

OK, got it. Thank you Tom!

[Tom]

Let me know how it goes 🙂

[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!

[shantel]

*correction*
Left-side

[Tom]

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!

[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

[Tom]

Hi Tom,

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

Can you link me to your site?

Thanks!

[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.

[Tom]

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;
    }
}

[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!

[Tom]

Cool let me know how it works out 🙂

[Author]

Posts