• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Magazine Pro – customized – Custom Header not showing up

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine Pro – customized – Custom Header not showing up

This topic is: not resolved

Tagged: Custom header, Magazine Pro

  • This topic has 7 replies, 2 voices, and was last updated 7 years, 1 month ago by CindyLeighDesign.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 30, 2016 at 8:55 pm #177942
    CindyLeighDesign
    Participant

    Hi there -

    Hoping someone can take a look and help me out. I'm pulling my hair out and have been working on this all day! I added code in both functions.php and my css code to add a custom Header that is full width. The space is there and when I hover over it, the alt text shows but the actual image isn't there! I've added the image in the "customize header" area. Ideally, I want to use the "unique headers" plug-in so that these change based on the page or post. But for now, I've deactivated that plug in .. though that doesn't help. Also, on the home page, I've added code to add a Soliloquy slider. That seems to work fine.

    The site I'm having trouble with is: http://www.my-stcroix.com You can see that the soliloquy slider works fine on the homepage... but on this page: http://my-stcroix.com/travel-channels-real-st-croix/ there's just a blank space where there should be a header.

    Here is the title area code that I'm using:

    /* Title Area
    --------------------------------------------- */

    .title-area {
    width: 100%
    }

    .header-image .title-area {
    padding: 0;
    }

    .header-image .site-title a {
    background-position: center !important;
    background-size: contain !important;
    float: left;
    display:inline-block;
    min-height: 425px;
    text-indent: -9999px;
    width: 100%;
    }

    .site-title {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1;
    margin: 0px;
    margin-top: 0rem;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0rem;
    background-position: center;
    display: none;
    }

    .site-title a,
    .site-title a:hover {
    color: #0278A3;
    margin-left: auto;
    margin-right: auto;
    display: none;
    }

    .site-description {
    display: block;
    height: 0;
    margin-bottom: 0;
    text-indent: -9999px;
    }

    Help!!

    http://www.my-stcroix.com
    January 31, 2016 at 5:23 pm #177994
    Brad Dalton
    Participant

    Try this tutorial http://wpsites.net/wordpress-themes/adding-custom-header-to-genesis/

    There's 2 changes you need to make.

    1. Change the values for the width and height in the PHP code for the custom-header function

    2. Change the values in the CSS under the Site Header section of your style.css file. There may be more than one value which needs changing.

    If the first tutorial doesn;t make things clear, try this one http://wpsites.net/web-design/custom-header-image-genesis/


    Tutorials for StudioPress Themes.

    February 1, 2016 at 1:23 pm #178078
    CindyLeighDesign
    Participant

    Hi Brad-

    I've already done both 1 and 2 ... thus the mystery. The Soliloquy slider works fine on the home page. And there is an adequate spot on the other pages - the problem is that it is blank (the image is not showing). I've adjusted the css a bit based on your second tutorial (I had looked at that before). Now the big space is gone which is a little better... but I'd still like to have a custom header image at the top.

    1. My functions.php has:

    //* Add support for custom header
    add_theme_support( 'custom-header', array(
    'default-text-color' => '000000',
    'header-selector' => '.site-title a',
    'header-text' => false,
    'height' => 425,
    'width' => 1140,
    ) );

    2. The values for the header are not in the Site Header section but here is what I have:

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */

    .primary-nav .site-header {
    padding-top: 75px;
    }

    .site-header .wrap {
    padding: 0px;
    }

    /* Title Area
    --------------------------------------------- */

    .title-area {
    width: 100%;
    }

    .header-image .title-area {
    padding: 0;
    }

    .site-title {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 0;
    }

    .site-title a,
    .site-title a:hover {
    color: #0278A3;
    margin-left: auto;
    margin-right: auto;
    display: none;
    }

    .site-description {
    display: block;
    height: 0;
    margin-bottom: 0;
    text-indent: -9999px;
    }

    /* Full width header, no widgets */

    .header-full-width .title-area,
    .header-full-width .site-title {
    width: 100%;
    max-height: 425px;
    }

    .header-image .site-description,
    .header-image .site-title a {
    display: block;
    height: 0px;
    margin-bottom: 0;
    text-indent: -9999px;
    }

    Any thoughts why the images just aren't showing? They work on another site I did this too: http://stxenvironmental.org/

    /* Logo, hide text */

    .header-image .site-title a {
    background-position: center !important;
    position: relative;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 9999;
    width: 100%;
    }

    /* Widget Area
    --------------------------------------------- */

    .site-header .widget-area {
    min-height: 425px;
    margin: 0 auto;
    overflow: hidden;
    width: 1140px;

    }

    .header-image .site-header .title-area,
    .header-image .site-header .widget-area {
    padding: 0px;
    }

    .site-header .widget-area p {
    margin-bottom: 0;
    }

    February 1, 2016 at 1:45 pm #178083
    CindyLeighDesign
    Participant

    also, you'll see here that it's showing that my header is uploaded and at the proper size
    screenshot

    February 1, 2016 at 1:59 pm #178094
    CindyLeighDesign
    Participant

    I adjusted the code slightly here and the space is back:

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */

    .primary-nav .site-header {
    padding-top: 75px;
    }

    .site-header .wrap {
    min-height: 425px;
    margin: 0 auto;
    width: 1140px;
    }

    But the image is still missing!!

    Missing header

    February 2, 2016 at 7:43 am #178146
    CindyLeighDesign
    Participant

    Also, I should mention that previously the headers WERE showing fine. I then added Woocommerce with the Print Aura plugin and there was a WordPress and Genesis update and then they disappeared. I've tried deactivating the plugins and they don't come back. I also had used the "Unique headers" plugin and have removed that but that doesn't make a difference either. AGH!!

    February 2, 2016 at 5:15 pm #178192
    Brad Dalton
    Participant

    Hard to say without logging in and looking for the problem.


    Tutorials for StudioPress Themes.

    February 3, 2016 at 11:19 am #178247
    CindyLeighDesign
    Participant
    This reply has been marked as private.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble