Twenty Seventeen header image position in pages and posts
-
Hello,
I am very new to CSS so my understanding is pretty basic.
After various searches on the forum I have managed to get the theme close to how I want it to look. Here are the things that I haven’t managed yet:
1) The Main menu formatting doesn’t span on the full width of the site. There are two small gaps in either side. I appreciate this is probably due to the main design of the theme but if there’s a way to cover these two gaps I ‘d like to do it.
2) I used some CSS code found on the forums to position the header image on the Page and Blog posts (ex. https://haireverafter.co.uk/services/) . However, it’s not doing what I ‘d like it to be.
I want the cropped part of the image that appears on the header image to be positioned a bit lower than what is currently now, so that it doesn’t crop out the head of the person in the picture. In the mobile version it works perfectly. So far I have only managed to fix it either for the desktop or the mobile version only. Not for both.3) I want to remove the gray band between the Header image and the Main Menu in Posts and Pages.
Thanks in advance for your help
The blog I need help with is: (visible only to logged in users)
-
Hi there!
The Main menu formatting doesn’t span on the full width of the site. There are two small gaps in either side. I appreciate this is probably due to the main design of the theme but if there’s a way to cover these two gaps I ‘d like to do it.
Please add the following CSS by going to My Sites → Customize → CSS in your blog dashboard.
.menu-menu-1-container { display: flex; justify-content: space-evenly; }I want the cropped part of the image that appears on the header image to be positioned a bit lower than what is currently now, so that it doesn’t crop out the head of the person in the picture.
The recommended Header Image sizes are 2000 wide by 1200 high for twentyseventeen theme. Please try with a bigger image and see if it fits correctly.
I want to remove the gray band between the Header image and the Main Menu in Posts and Pages.
Add the following CSS-
.custom-header { margin-bottom: 0; }Hope this helps and let us know if you still have questions. :)
-
Hi,
Thanks for your quick reply.
1) Unfortunately that didn’t work.
Here is the CSS I am using for the main menu:
/*Main Menu position and design*/
.navigation-top ul {
background-color: rgba(0,0,0,0.5);
text-align: center;
}.navigation-top {
border: none;
font-size: 110%;
position: static;
}.navigation-top .wrap {
max-width: none;
padding-top: 0;
padding-bottom: 0;
}.custom-header-media::before {
background: none;
filter: none;
}2) I appreciate the recommended images are 2000 x 1200, however in photos with humans, their heads tend to be towards the upper side of the photo and therefore, ideally I ‘d need it to be positioned more towards the upper side in the Desktop version. In the mobile version it looks all right simply because the banner for the Menu button is positioned on top of the image, allowing only the upper half to appear in the header.
3) That didn’t work either. This is the CSS I am using for the image header.
/*Adjust position of Header Image*/
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 100%;
object-fit: cover;
object-position: 10 15;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
width: 100%;
}.custom-header-media {
height: 62vw;
}.custom-header {
overflow: hidden;
} -
I misunderstood your question –
1. You can use this code to make the menu cover the full width of the page-
.navigation-top .wrap { padding: 0; }Let me know if you mean something else.
2. I can see your image has proper dimensions now i.e. 2000 x 1200. It is not getting cut now. Do you see it cut on your desktop?
3. Could you please link to a page where you are seeing the grey header after applying the above CSS. When I use the above CSS, the grey header disappears for me.
-
1. Worked like a dream. Thanks! :-)
2) & 3)
Check the
ScreenshotYou can see that the header is positioning the image in such a way that the subjects lose their heads. It’s nearly Halloween which is ok for now but not for the rest of the year. :-D
You can also see the grey band (some form of padding) between the Header Image and the Main Menu.
-
Ok so I ‘ve managed to fix the positioning issue.
Using the code below I managed to position the Header images in precise location using the object-position: 50% 15% (x,y coordinate).has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 100%;
object-fit: cover;
object-position: 50% 15%;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
width: 100%;
}.custom-header-media {
height: 62vw;
}
.custom-header {
overflow: hidden;
}3) Now for the last issue this is caused because the position of the navigation-top is set to static. If I remove this it eliminates this gray band.
.navigation-top {
border: none;
font-size: 110%;
position: static;
}
However, I do want to keep the Static position for the Home page. Is there a way I can only have the static positioning in the Home page and have it differently for Page and Posts? -
-
- The topic ‘Twenty Seventeen header image position in pages and posts’ is closed to new replies.
WordPress.com Forums 
