jbQ Media

Web Design, SEO Services and Media Production | Yonkers | Westchester | NY

(917) 861-1242
  • Home
  • About
    • Why Us
    • Jon Burr | Site Designer
    • Our Rates
    • Contact
    • Our Location
    • News via Twitter
  • Our Services
  • Photography
  • Articles
  • Reviews
  • Website Portfolio Gallery
You are here: Home / Tutorials / Adding a full-width responsive header in a Genesis theme (January 2018)

Adding a full-width responsive header in a Genesis theme (January 2018)

January 24, 2018 By Jon Burr Leave a Comment

I’ve run into this more than once, and every time I’ve forgotten how I did it last time and have to find out again how to do it. This article is a reference for my own use – and if you’re reading it, hopefully it’ll be of some use to you as well.

Add a Full-Width Responsive Header in a Genesis Theme

Required:
Code editor (I use BBEdit on the Mac)
FTP access (I use Transmit)

There’s a lot of old, conflicting information about this problem floating around in the Google index.
StudioPress and WordPress have each taken partial steps to solve this problem, but their solution for using a custom header image that works so well in the general case fails when the image is full width.

Here’s what works as of this writing:

1. Back up your child theme’s style.css and functions.php files locally, in a different location than your work copies. Make the changes on your machine, then ftp them up to the server.
2. Disable theme support for custom header in functions.php.
Find and delete the lines below in your funtions.php file:

// Add support for custom header.
add_theme_support( 'custom-header', array(
'width' => 1140,
'height' => 244,
'header-selector' => '.site-header .title-area',
'header-text' => false,
) );

3. In your WP Admin/Customizer/Site Identity, select /Use for site title/logo>Dynamic Text (if it isn’t already)

Customizer Site Identity settings

If you see this, you’ve successfully deleted theme activation for custom headers in your functions.php

4. Create your header in the desired starting size (1140×200, for example) – make a note of the dimensions.
5. Upload your image to the media library, copy the url, put it aside in a text document to use in step 5
6. In your css, find and define:

.header-image .site-title a {
background: url(‘your-image-url’);
background-repeat: no-repeat;
float: left;
margin: 0;
max-width: ####px;
min-height: ###px;
padding: 0;
width: 100%;
background-size: contain !important;
}

You should see your image ! So far so good.

I’m seeing a double images when the viewport gets smaller!

The background-size: contain; property and attribute have an interesting bug. When the viewport gets smaller than the original image, you still see the full size image behind the “contained” version of it.
You need to modify your min-height property in your media queries – otherwise you will see a double image at smaller device sizes (which is your responsive image overlaid over the original).

Your media queries look like this:

@media only screen and (max-width: ###px) {
[rules]
}

Try resizing your viewport, either by dragging the browser window corner or using responsive developer tools. When your layout starts to look wrong, make a note of the viewport size.
For each viewport variant, use Developer Tools or Firebug to find a value that works at the widest and narrowest widths before the next media query size.

When inspecting the element, you should see the .header-image .site-title a in the css pane. Adjust the min-height value until it looks right. Copy the ### that works.

Paste this line at the bottom of each media query block in your style.css (don’t overwrite the closing “}” )

.header-image .site-title a {
min-height: ###px;
}

Input the ### into your css, save and upload.

Need help? Hit the site form.

Related Posts:

  • Converting WordPress Widgets for use in the Block Editor Learn how to convert old html widgets to a Block…
  • Why SEO is Better than Paid Google Ads Search engine optimization (SEO) and paid Google ads (PPC) are…
  • Creating a Glossary for a WordPress Site with ChatGPT AI We created a custom glossary for a WordPress music arranging…
  • How to Change the Styling of a Column in the WordPress Block… To add or change the background color of a column…

Filed Under: Tutorials, Useful Tools

Site Search

Our Services

  • WordPress
  • SEO
  • Strategy
  • Consulting
  • Website Design
  • Useful Tools
  • Tutorials
  • Editorial

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Contact us now! :)

Why delay? Initial consultation is on the house!

call (917) 861-1242

    Your First Name (required)

    Your Last Name (required)

    Your Email (required)

    (please double-check it!)

    Subject

    Contact from jbQ Media Website

    Your Message

    *required


    Subscribe me your mailing list

    Human?*

    • Production
    • WordPress Sites
    • Strategy
    • SEO
    • Websites
    • Editorial
    • Contact
    • Terms of Service
    • Cookie policy

    © 2014 jbQ Media

    Google+
    Manage Cookie Consent
    We use cookies to optimize our website and our service.
    Functional cookies Always active
    The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
    Preferences
    The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
    Statistics
    The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
    Marketing
    The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
    Manage options Manage services Manage vendors Read more about these purposes
    View preferences
    {title} {title} {title}