[Support request] Position Widget under Header for Logged in User

[John]

Hi,

Re: https://origamimembstg.wpengine.com/member-login/

When logged in to this membership site, the header is added using this filter:

add_filter( 'generate_logo', function( $logo ) {
    if ( is_user_logged_in() ) {
        return 'PATH-TO-HEADER-IMAGE';
    }

    return $logo;
} );

I’d like to place a recent posts widget underneath the logged-in header, but when I do that in–Customize > Widgets > Header–the widget floats to the right and above the header, instead of centered and underneath under the header, like the language-switcher-widget on this site.

How can this widget be positioned underneath the header on the logged-in side of the site?

Here is a screenshot.

Thank you,

John

[John]

Hi!

Any ideas to share about this issue?

Thank you,

John

[David]

Hi there,

first thing – which structure do you have in the Customizer > General setting ? It looks like its set to Floats, whereas you reference site is using Flexbox. Can you set it to flexbox, then we can use some CSS to position it.

[John]

HI David,

Thank you for this.

Changing to Flexbox appears to have done the trick. Screenshot here.

So, what does Flexbox do that Float doesn’t? And why is it that now that General > Settings has been changed to Flexbox, the FLoats option no longer appears as an option, at least as far as I can tell?

Any suggestions for articles I can read about Flexbox/Floats?

John

[Fernando]

Hi John,

Floats was the old system used to design websites. In comparison to floats, flexbox is the newer system which makes it easier to design web pages. Basically, it’s lighter, easier to customize, and all around a lot better!

Here’s a good article I found discussing what flexbox is, and why it’s used now instead of floats: https://www.geeksforgeeks.org/why-would-you-use-flexbox-instead-of-floats/

We’ve already made flexbox the default setting, and going back to floats from flexbox might break your site. This is the reason why it isn’t available in the settings.

Hope this clarifies!

[John]

Hi Fernando,

Understood and thank you for the clarification.

This particular website was built in 2020 so maybe Flexbox wasn’t available then.

John

[Fernando]

You’re welcome John! Yes, Flexbox was implemented in GP version 3.0 which was released on. October 7, 2020.

[Author]

Posts