[Resolved] Move header widget under logo on mobile

Home Forums Support Move header widget under logo on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #925340
    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?

    #925358
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #926160
    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.

    #926198
    Leo
    Staff
    Customer Support

    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

    #926206
    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.

    #926212
    Leo
    Staff
    Customer Support

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

    #926270
    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/

    #926286
    Leo
    Staff
    Customer Support

    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/

    #926347
    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?)

    #926472
    Leo
    Staff
    Customer Support

    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%;
        }
    }
    #927333
    Raielene

    Thought so. Thanks!

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