[Resolved] Move header widget under logo on mobile

[Raielene]

I’ve used bits of CSS found here to try to get my header widget content (a menu that I don’t want to be condensed, just listed vertically) and I’ve gotten close, but it’s still not right.

My logo isn’t centred and neither is the menu items.

I increased the size of the widget to fit my 3 menu items into it on desktop:

.header-widget {
max-width: 75%;
}

Then moved it down a bit to make it centred vertically:

@media (min-width:769px) {
.header-widget {
padding-top: 30px;
}
}

Then I used this code to try to move those menu items below my logo:

/* header widget under logo */

@media (max-width: 768px) {
.inside-header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

.site-branding {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}

.site-logo {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

.header-widget {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
}

Also, ideally, I’d like that entire menu area to have a background colour (another bar like the menu below it) if there’s a way to do that?

[Leo]

Hi there,

Let’s try one thing at the time 🙂

So just to make sure, you want the header widgets to be centered below the logo right?

If so, add
flex-direction: column;
to this CSS:

.inside-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

Then add
margin: auto;
to this section:

.header-widget {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}

Let me know 🙂

[Raielene]

Closer! Much closer. It all still seems a little off-centre to me. It’s leaning a little to the right.

In a perfect world, I’d get everything perfectly centred, give some space between the logo and menu (right now they’re closer to each other than the menu items), then put the menu into it’s own band.

[Leo]

Your page looks different than before:
https://www.screencast.com/t/KFlpzMt8KVmL

Can you double check?

I also see LiteSpeed cache activated so please take a look at this note:
https://www.screencast.com/t/sAZU8h7bUcE

[Raielene]

LiteSpeed is for sure deactivated. Maybe you checked while I was clearing and purging, etc. and saw it before I deactivated? It’s for sure deactivated now.

[Leo]

Unfortunately I’m still seeing the same weird page as before using incognito mode and hard cleared cache on my end.

[Raielene]

I can’t understand why that would be… I’ve purged the cache and deactivated LiteSpeed.

For now, can you just look at one of the interior pages? I think the issue might only be with that main page for some reason…

Try this one: https://www.bluepixeldesigndevelopment.com/bluepixeldesign/definition-of-psychosis/

[Leo]

Sub pages work.

It’s not centered because the left and right header padding aren’t the same:
https://www.screencast.com/t/iGFX66TBw

You can adjust it here:
https://docs.generatepress.com/article/header-padding/

[Raielene]

Oh! Good catch! Thanks!

I don’t suppose there’s a way to make the header widget background full width on mobile while keeping the contents centred? (If I give that header widget a background, it just makes my little content area coloured when I’d ideally like a bar there. Obviously that widget is just that little box, so that’s not how it works, but can I make it look like it somehow?)

[Leo]

Not really a way to make full width as it’s inside the header with the padding:
https://www.screencast.com/t/5nNw2hf0wI

We can make it wider with this CSS:

@media (max-width: 768px) {
    .header-widget {
        width: 100%;
    }
}

[Raielene]

Thought so. Thanks!

[Leo]

No problem 🙂

[Author]

Posts