Verity Theme – Image Under Site Header

  • Unknown's avatar
    iamthedarklady · Member ·

    Hello,

    I am have trouble replicating the homepage layout across the other pages of my website, thedarkladypodcast.com
    I’m wishing for the image to sit underneath the site header, exactly like the homepage layout. The Verity Theme has a header media option allowing me to easily set the image on the homepage. This option is not available for the other pages so I have been editing the CSS to try and achieve this.

    The closest I have been able to match up the two pages was by using variants of this code:
    div.site-header-main {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    }

    Using this, the image sits under the header, however the header becomes broken, moving over two lines instead of one and scaling incorrectly on smaller sized screens.

    Any help with this would be much appreciated.

    The blog I need help with is: (visible only to logged in users)

  • staff-zinnia · Staff ·

    Hi –

    Thanks for getting in touch. I will be happy to take a look at this, and probably ask a colleague for an assist. Someone will get back to you as soon as we can.

    Thanks :)

  • staff-miltonb · Staff ·

    Hello there,

    Having the same structure you do on the homepage will be a hard thing to accomplish. The best I could do was to come up with this particular code:

    
/* START 3128733-f */

/* Header: make it absolute */
body.has-custom-header .site-header-main {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 3;
}

/* Header: make the custom header image shorter and closer to what it looks like on the homepage */
body.has-custom-header .below-site-header .singular-header-image,
.singular-header-image img{
  max-height: 500px;
  overflow: hidden;
  background: #17101F;
}

/* Header: make sure the image is not stretched */
body.has-custom-header .singular-header-image img {
  object-fit: contain;
}

/* Menu: force new link colors for large screens */
body.has-custom-header:not(.menu-open) .site-header-main a,
body.has-custom-header:not(.menu-open) .social-navigation .jetpack-social-navigation a,
body.has-custom-header .site-title a {
  color: #fff;
}

/* Menu: add a background for social icons */
body.has-custom-header .social-navigation .jetpack-social-navigation a:hover {
  background: rgba(102,102,102,.2);
}

/* Mobile Menu: ajusting the top margin */
body.has-custom-header.menu-open .menu-inside-wrapper {
  top: 60px !important;
}

/* Mobile Menu: add a the dark overlay when menu is open */
body.has-custom-header.menu-open .overlay {
    background: rgba(0,0,0,.5);
}

/* Mobile Menu: change the color of the menu toggle */
body.has-custom-header .menu-toggle {
    color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,.3);
  background: rgba(102,102,102,.2);
}
body.has-custom-header .menu-toggle-wrapper {
    border-color: rgba(255,255,255,.1);
}
/* END 3128733-f */

    As you can see, I’m using the body.has-custom-header class, which apparently is only applied for pages that have a featured image. The other pages without this feature should not be affected by the code.

    The code will also try to make things look solid on mobile devices. I can’t guarantee it will work fully, but we got a start here. :)

    Hope it helps!

  • Unknown's avatar
    iamthedarklady · Member ·

    Thank you for getting back to me so quickly. Those changes worked fantastically.

  • The topic ‘Verity Theme – Image Under Site Header’ is closed to new replies.