[Resolved] Change order of mobile header items?

[Zach]

Hi. I’ve been using GPP for awhile on https://www.zachpoff.com/ and loving it. I added my site title to the mobile header using the inside_mobile_header hook. I’m having trouble styling the title so it floats just to the right of the mobile logo. This seems to have been working before GPP 1.7 upgrade, but now the title and logo have switched places. Any thoughts?

Here’s what I inserted into the hook (switched over to Elements->Hooks, so fancy now!):

<div class="mobile-header-content">
        <a href="<?php bloginfo( 'siteurl' ); ?>"><h2><?php bloginfo( 'name' ); ?></h2></a>
    </div>

And the CSS

/* Custom Mobile Header tweak to add site title beside logo */

.mobile-header-content {
    float: left;
    padding: 5px;
}

.mobile-header-content h2 {
    margin-bottom:0px;
	color: #d6d6d6;
}

[Leo]

Hi there,

Depends which version you upgraded from, the mobile header has been changed to flexbox in recent versions so we can rearrange the items in there easier.

Try this CSS:

#mobile-header .site-logo {
    margin-right: 0;
}
.mobile-header-content {
    order: 2;
    margin-right: auto;
}
#mobile-header .mobile-bar-items
    order: 3;
}

Let me know 🙂

[Zach]

Thanks for the reply. I’m just starting to wrap my head around flex box!

It seems like this CSS is being overridden by the stock css (The opening bracket was missing in your example BTW)

#mobile-header .mobile-bar-items {
    order: 3;
}

FF says that it’s being superseded by mobile-header.min.css
I added !important to make it work but I don’t know if that’s just treating the symptom and missing the cause.

Next question: How do I move the site title so it’s left-justified, right next to the logo? It seems to be centered now.

[David]

Hi there,

try this CSS:

#mobile-header .site-logo {
    margin-right: 0 !important;
}

[Zach]

Perfect. Thanks a million!

[David]

Glad we could be of help.

[Author]

Posts