INTERGALACTIC Theme: How do I change the site header to fill screen?

  • Unknown's avatar
    javadilab · Member ·

    Dear All,

    I have been in touch with support and they could help me out, and suggested that I ask my question here in the forum.

    The page I need help with is: javadilab.wordpress.com/

    With the default Intergalactic theme, when you click on a post, the featured image fills up the entire page and autoscales depending on the size of the browser window. i.e. it keeps the page filled with the featured image until you scroll down to the content. For example:

    https://intergalacticdemo.wordpress.com/2014/09/27/welcome-to-espresso/

    I would like to replicate this feature for my sites homepage, but only for the site header. I tried playing around with CSS but to no avail.

    I would really appreciate your assistance in helping me achieve this. Please note, that I would also like the site title and site description to stay in the center (with the increased site header, i dont want the title and description to stay at the top of the header, i would like them to always be in the center of the header).

    Thank you!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, we can do this, but there are a number of things to consider.

    We have no control over the height of a visitor’s browser window, which means we can’t make it full height of the window for everyone.

    The image that WordPress creates for your header is 460px tall, which means that we will lose some quality, and it will zoom in quite a bit when we make the header image area taller.

    If we make the image, say 1000px in height, and then center the text vertically, if someone is on a monitor that is short, or has their browser window set shorter, your title and tagline may not show until they scroll down.

    Sorry, one more. If you narrow your browser window, you will see that the title and tagline decrease in size, which works nicely when the image is at the designed height, but not so much when we make the image taller. This can be overridden.

    Let’s give the following a try. I’ve use a Media Query to limit this to screens/windows 800px and wider. Below that width, it reverts to the original design. Paste this into your custom CSS at the very bottom below everything else and see what you think. 

    @media screen and (min-width: 800px) {
  .home .site-header {
      min-height: 1000px;
  }
  .home.has-custom-header .site-branding .site-title {
      margin-top: 35%;
  }
  .home.has-custom-header .site-branding .site-title {
      font-size: 5.55em;
  }
}
  • Unknown's avatar
    javadilab · Member ·

    Hi!

    Thank you for your reply. This has worked very well! I can now see what you meant with the title and tagline, so I have adjusted some of the percentages and values to minimise this. Hopefully it will work well. I just have to test it out on a few displays and see how it works out.

    Your help has been great! Thank you so much.

    I just got off the chat with support and I have another question I am hoping you can help me with, as Support werent able to find a solution.

    On the homepage, you can see all my posts with “Read More” links. I have found a way to hide all of them simultaneously using the following:

    .home .more-link {
    visibility: hidden;
}

    However, would it be possible to apply this to only one post on the homepage? Specifically, the “Our Mission” post.

    Additionally, would it be possible to remove the hyperlink from that post too? i.e. make the “Our Mission” text not clickable.

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    We can use the unique id CSS class for the Mission post to hide the read more only on that post on the home page. 

    .home #post-42 .more-link {
    display: none;
}

    Additionally, would it be possible to remove the hyperlink from that post too? i.e. make the “Our Mission” text not clickable.

    We can target that again with the unique post id and set the pointer event to none for the title, which will make it un-clickable. 

    .home #post-42 .entry-header a {
    pointer-events: none;
}
  • Unknown's avatar
    javadilab · Member ·

    Wow! Thank you so much!

    Now that you’ve shown me the coding for it, it seems so logical! But I really couldn’t have done any of this without your help.

    Thanks again.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘INTERGALACTIC Theme: How do I change the site header to fill screen?’ is closed to new replies.