Starting Featured Images Below Fixed Sticky Menu

Greetings…I have a 1 inch white fixed background for my sticky menu on my site (foraraneyday.com). Both my Jumbotron image and my blog featured images are starting underneath that one inch portion of the menu. Is there a way to start the picture at the bottom of the fixed menu in order to avoid cutting off the top inch of my featured images? At present, the images do not look right because they are cut-off.

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/* home page image */
.home header#header {
  background-position-y: 95px;
}

/* single blog post image postion*/
.single header#header {
  background-position-y: -205px;
}

/* menu */
#header .top-header {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* single blog post title postion down*/
.post-template-default #header .bottom-header h1 {
    margin-top:20px;
}
/* arhive title postion down*/
.archive .bottom-header h2 {
    margin-top:50px;
}

Hope this helps.

Best regards,
Support.

THANK YOU for the prompt response!! This definitely fixed the issue with my jumbotron image. I believe there’s still an issue with the sizing of my blog featured image. I reverted back to the generic 1920x532px image that accompanied the theme. As you can see from the attached images, the cup in the first screenshot (from my site) is cutoff versus the one from the demo. Possibly this is due to an error in my fixed header CSS??? Any thoughts on why the jumbotron image was corrected, but not the blog image? Again, thank you so much!

Hello there,

That could be an issue with the padding. The following CSS can be used to edit the padding for the header in the posts:

/*Header padding for posts*/
#header .bottom-header.blog {
    padding: 130px 0;
}

If this does not work, please provide a link to your website so that I can inspect it?

Best Regards,
Support

Thank you for the reply. I’ve posted that into my CSS without any change. My link is foraraneyday.com. I would greatly appreciate your feedback on this issue. Much Thanks!

Hello there,

Please remove the previous CSS code and add this one instead:

#header .bottom-header.blog { padding: 130px 0; padding-top: 230px; }

Best Regards,
Support

Thank you so much for working with me on this. I noticed an improvement with the Illdy stock photo of the coffee cup, but the image is completely distorted when I insert my own image. Please see the link below:

http://foraraneyday.com/plan/

I have attached the image to this message as well. The image dimensions are 1920x532px as recommended within the theme.

I would really appreciate any input as to why the image is so zoomed in even though I’m using the recommended size. Thank you so much!

Hey there,

You can use the following CSS to reveal more of the image.

/*increase header padding size*/
#header .bottom-header.blog {
    padding-top: 500px;
}

Best regards,
Support.

Thank you so much! I am almost set on this issue. I had thought/hoped when I got the featured image in place, that the automatic heading titles to each of my pages would be replaced by the image. This is not the case. The heading is white, so you cannot see it clearly, but it’s there. I’ve included a zoomed in photo to try to provide a visual for what I’m describing. How do I delete the heading title for my pages? Thank you!