1

I've been editing the Twenty Seventeen theme via a child theme on my Wordpress blog, and I've tried to adjust the scrolling height of the Header as it took up way too much space before. I wanted more of a traditional header.

Note I don't want to resize or crop the actual header size but crop the size of the vertical height the header takes up. Searching around I found a way to do this via the following thread:

How do I change the header image height in Twenty Seventeen?

However, this only adjusts the height on the home page and not any other pages. I would like it to be alike for all the pages. (My reference, my site is here http://chugsforlife.esy.es/ , if you look on the homepage the header height is fine, but go to any other page and it is ridiculously squashed)

EDIT: Here's the code i originally added into the style.css of my wordpress child theme:

.twentyseventeen-front-page.has-header-image .custom-header-media,


.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 60vh;
max-height: 100%;
overflow: hidden;
}


.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(60vh - 32px);
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    display: table;
    height: 300px;
    height: 55vh;
    width: 100%;
}
1

from that question you mentioned, this is the code:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

Revision: Try removing home and front-page from the selectors for your specific use: You can use this to replace what you put in and it will cover the front page as well.

.has-header-image .custom-header-media, blog.has-header-image .custom-header-media {
    height: 1200px;
    height: 70vh;
    max-height: 100%;
    overflow: hidden;
}

.has-header-image .custom-header {
    display: table;
    height: 300px;
    width: 100%;
}
  • Hey there, thanks for answering, but I don't think this is the solution, trying it out in different ways you mentioned, it still only resized the image. I want the same effect that I have on the homepage on the other pages, ie, resizing the actual "viewing window" of the image rather than the image itself. – hessam zare Aug 7 '17 at 23:06
  • Can you tell me what code you added fro the other question? I'll compare for you. – rudtek Aug 8 '17 at 0:19
  • hey check the original post I added it into the edit – hessam zare Aug 8 '17 at 21:04
  • ok try this above: if you ONLY added the code that you mentioned it should take care of it. or are you talking about the parallaxing effect? – rudtek Aug 9 '17 at 19:01
  • Hey I tried replacing it with your modified code but it doesn't appear to work! It just makes the header on the gap on the front page massive and the rest of the pages short, whereas I like the way the front page header is now but want the same effect on the other pages. – hessam zare Aug 9 '17 at 21:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.