[Resolved] Change order of mobile header items?

Home Forums Support [Resolved] Change order of mobile header items?

Home Forums Support Change order of mobile header items?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #653084
    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;
    }
    GeneratePress 2.1.3
    GP Premium 1.7.1
    #653153
    Leo
    Staff
    Customer Support

    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 🙂

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

    #653417
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

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

    Perfect. Thanks a million!

    #654190
    David
    Staff
    Customer Support

    Glad we could be of help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.