Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Custom Header

Home Forums Support Custom Header

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #172228
    dlanghoff

    Hoping GeneratePress will save me time over building up from an Underscores base each time. Still learning, but searches aren’t helping much with this topic….

    Most of my sites have mostly static pages, and inevitably the client wants two separate graphic elements to every page’s header. It’s hard enough to get one aligned properly sometimes (e.g., a logo on the left), let alone two (say, a call-to-action button on the right)–and each will have separate links associated with them.

    Short of a custom header.php, or one huge background image (which doesn’t scale well), how are folks handling more complicated header construction–especially in the GeneratePress world?

    — Dan L.

    #172310
    Tom
    Lead Developer
    Lead Developer

    Hi Dan,

    Couple of options:

    a) Use a site logo (Customize > Site Identity) and a Text widget (Appearance > Widgets > Header).
    b) Use GP Hooks in the “Before Header Content” hook:

    <div class="grid-50" class="left-logo">
        First logo in here
    </div>
    <div class="grid-50" class="right-logo">
        Second logo in here
    </div>

    Then add this CSS:

    @media (min-width: 769px) {
        .right-logo {
            text-align: right;
        }
    }

    Let me know if you need more info 🙂

    #172485
    dlanghoff

    Thank you for your response!

    Exploring suggestion 1 for now; the order of creation seems backwards to me (viz., header-widget, site-branding, THEN site-logo), but I’m sure there’s a good reason.

    Between shortcodes (e.g., for your Columns plugin), Sections, and some Simple CSS, it’s getting hard to turn a normal user loose with the WYSIWYG editor!

    #172529
    Tom
    Lead Developer
    Lead Developer

    No problem! Let me know if you need more info 🙂

    #173723
    dlanghoff

    Quick follow-up on this subject: what method would you recommend for changing the creation order within the header (currently, I’m assuming it’s header-widget, site-branding, then site-logo)? I’d rather go logo-title-widget, as I think it would look more natural as screen width decreases.

    — Dan

    #173767
    Tom
    Lead Developer
    Lead Developer

    Hi Dan,

    You can use this CSS to rearrange stuff on mobile:

    @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: 2;
    		-moz-box-ordinal-group: 2;
    		-ms-flex-order: 2;
    		-webkit-order: 2;
    		order: 2;
    	}
        
    	.site-logo {
    		-webkit-box-ordinal-group: 1;  
    		-moz-box-ordinal-group: 1;     
    		-ms-flex-order: 1;     
    		-webkit-order: 1;  
    		order: 1;
    	}
    
    	.header-widget {
    		-webkit-box-ordinal-group: 3;
    		-moz-box-ordinal-group: 3;
    		-ms-flex-order: 3;
    		-webkit-order: 3;
    		order: 3;
    	}
    }

    Let me know if you need more info 🙂

    #175002
    dlanghoff

    Thanks VERY much. That was a new one on me!

    I have other GP “theory” questions, but I’ll start another topic.

    — Dan L.

    #175057
    Tom
    Lead Developer
    Lead Developer
    #230678
    Erik

    Hi, how can i put two images between the logo and header widhet?

    #230777
    Tom
    Lead Developer
    Lead Developer
    #230943
    Erik

    Thanks Tom. But do you have a solution for iPad?
    On a pc the header is splitted in 3 parts next to each other but on a iPad under each other.

    #230964
    Tom
    Lead Developer
    Lead Developer

    You would just need to add the tablet-grid-* class to the elements:

    <div class="grid-33 tablet-grid-33 header-left">
        Left area content (phone number etc..)
    </div>
    <div class="grid-33 tablet-grid-33 header-center">
        <img src="URL TO YOUR LOGO" alt="" />
    </div>
    <div class="grid-33 tablet-grid-33 header-right">
        Right area content (icons etc..)
    </div>
    #230965
    Erik

    Thanks, that’s the solution

    #230969
    Tom
    Lead Developer
    Lead Developer
    #241210
    John

    Hi Tom,

    I’m a newbie to wordpress site creation, but was quite taken with the GeneratePress theme and have now purchased your GP premium plugin and like it a lot.

    However, I’m getting a little frustrated trying to customize the header with a background image and text on your GeneratePress child theme.

    I get the image in OK, but when I test it, the image doesn’t scale down as the browser window shrinks, and on a smartphone, the header image does not display at all.

    Also, what’s the best way to get text laid out on top of the header image? I’ve been using the standard wordpress header widget, but I find it hard to get the Text phrase over to the left side of the header area where I want it.

    Here is the site I’m trying to improve with these things I’ve mentioned:

    http://www.limitlesshealingwaves.com

    Also, I should mention that I’m using the Elementor plugin a lot for basic page layout and editing. Maybe there is some conflict going on with it and GP products in regard to my issues I’ve mentioned with my header?

    Any help would be greatly appreciated!

    Thanks,
    John

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