Hi Kelibzon, I’m not able to see your site as it says it’s down for maintenance. Is it possible to let me see it?
Hi Kathryn. Sorry, I had forgotten to remove the offline mode because of some changes I’ve been doing. But right now, it’s online; please check it out and try to click on the posts.
You’ll realize the header appears just after the featured image and I would rather only the featured image appeared as the header and then the main header moved to the home page. I really appreciate your help!
Thanks! This bit of CSS should hide the header on your single (individual) posts:
.single .header-image {
display: none;
}
An easy way to add this CSS without touching your theme is through Jetpack. Just activate the Custom CSS module if it’s not already active, and paste this CSS there. This way, your CSS won’t be overwritten when you update the theme.
Let me know how it goes!
Hi Kathryn. Thanks for your great feedback! Now, where exactly do i paste this code. Is it under editor > single post (single.php) or how do i know if the custom CSS is active or not? Sorry if this sounds like a no-brainer but i am not very familiar with coding but I can edit it under guidance. Thank you.
I am trying to follow through the link you game me on custom css to fix this issue. I hope this will help out. I will keep you posted shortly.
Hi Kathryn. I have come across the following in the CSS editing window:
/*
Welcome to Custom CSS!
CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.
By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/
Now, do I simply paste the code you gave earlier below this message?
Thanks
Kelibzon
Whaat! It has worked out like crazy 🙂 I was a bit slow to effect the changes because CSS usually delicate and it messed me up a while ago.
Now, one more thing: My header on the home page has some a black padding on the left side yet i uploaded an image, which should fit on the header window exactly (the image width is 1440px). I would like the header to cover that section from one end to the other end.
Lastly, the post images (now appearing as individual post headers)seem a bit huge and a bit cut off at the top section. Is there a way of auto resizing this or how do i adjust that so that they appear as clear as those in allthingsebonybrown.com?
Thank you!
Kelibzon
Hi Kelibzon, this code should stretch out your header image:
.site-header img {
max-width: none;
width: 100%;
height: auto;
}
#masthead {
max-width: none !important;
}
#masthead #logo {
float: none !important;
}
If you also then want to re-align your menu, you can add this as well:
.nav-wrap {
float: none ! important;
margin: 0px auto ! important;
width: 1000px ! important;
}
.main-navigation {
float: left !important;
}
Thanks a bunch for the info Kathryn! A quick question: where exactly in the editor should I post the codes you just sent?
Thanks again!
Kelibzon
At the bottom of your Custom CSS file.
Hi esmi. Thanks for your great input here:) I have pasted the code there and I can see a warning saying “Be careful when using important declaration”.
Di ignore this warning and save the changes?
Thanks a lot! This forum is extremely amazing with great experts. My issues are all solved. Did i mention all the codes Kathryn suggested worked out perfectly? My site is now looking awesome! In case of anything, I’ll be back 😀
Cheers!
Kelibzon