Fixed Header Is Blocking Part Of My Blog Photo

• 

  lifeismeantforexploring · Member · Mar 23, 2017 at 10:56 pm

  • Copy link
  • Add topic to favorites

  Hi there!

  If you view our “Adventure Blog” page on mobile you will notice that our fixed header is blocking half of the image at the top of the page. This is also the case if you click through to one of the blog posts.

  Is there a way to adjust this so that it displays correctly with the fixed header?

  Thanks in advance,
  TJ & Alli

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

• 

  thesacredpath · Member · Mar 24, 2017 at 6:10 pm

  • Copy link

  Hi TJ & Alli, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and let me know what you think. I’ve used a Media Query to space the content down on 500px and narrower screens/windows.

  @media screen and (max-width: 500px) {
  .blog .site {
  	margin-top: 100px;
  }
  }

• 

  lifeismeantforexploring · Member · Mar 24, 2017 at 8:04 pm

  • Copy link

  This worked! Thank you.

  Now, is there a way to do the same thing on each blog post. For example, now when you go to our “Adventure Blog” on a narrower mobile device the image shows correctly, but when you click on a post and are directed to that posts unique page, the top image is still slightly cut off.

  We appreciate your assistance!
  TJ & Alli

• 

  lifeismeantforexploring · Member · Mar 26, 2017 at 12:19 am

  • Copy link

  Any thoughts?

• 

  thesacredpath · Member · Mar 27, 2017 at 9:18 pm

  • Copy link

  Hi there, I’m seeing a number of things we need to address that are the result of “fixing” the title/navigation area. First off, when I’m logged in and the admin bar is at the top of the screen, your site title is partially obscured. We will need to make a few specific adjustments to get things to work while logged in and logged out, and on all the different page types.

  First off, remove this from your custom CSS.

  @media screen and (max-width: 500px) {
  	.blog .site {
  		margin-top:150px
  	}
  }

  and then place this at the very bottom of your custom CSS.

  @media screen and (min-width: 783px) {
  	.logged-in .site-header, .logged-in .site-header {
  		margin-top: 32px;
  	}
  	.logged-in .site {
  		margin-top: 150px;
  	}
  	.blog .site {
  		margin-top: 130px;
  	}
  	.logged-in.page .site {
  		margin-top: 0;
  	}
  }
  @media screen and (max-width: 782px) {
  	.single.logged-in .site-header, .page.logged-in .site-header {
  		margin-top: 45px;
  	}
  	.single.logged-in .site {
  		margin-top: 125px;
  	}
  	.blog .site {
  		margin-top: 100px;
  	}
  }
  @media screen and (max-width: 500px) {
  	.blog .site {
  		margin-top: 150px;
  	}
  }

• 

  lifeismeantforexploring · Member · Mar 29, 2017 at 3:18 am

  • Copy link

  Hey,

  Thanks! This definitely seems to have fixed those obscurities when logged in. However, when I view on my mobile and click on a blog post the top image still gets cut off by the fixed menu.

  We appreciate the help,
  TJ & Alli

• 

  thesacredpath · Member · Mar 29, 2017 at 6:01 pm

  • Copy link

  Hmmm, my phone is updating, but I was able to see the issue in my browser at phone widths, and I see that I didn’t account for single posts when logged out, so let’s give this a try, and make sure and click around, logged in and logged out, and let me know if I missed anything else.

  @media screen and (min-width: 783px) {
  	.logged-in .site-header, .logged-in .site-header {
  		margin-top: 32px;
  	}
  	.logged-in .site {
  		margin-top: 150px;
  	}
  	.blog .site {
  		margin-top: 130px;
  	}
  	.single .site {
  	    margin-top: 150px;
  	}
  	.logged-in.page .site {
  		margin-top: 0;
  	}
  }
  @media screen and (max-width: 782px) {
  	.single.logged-in .site-header, .page.logged-in .site-header {
  		margin-top: 45px;
  	}
  	.single.logged-in .site {
  		margin-top: 125px;
  	}
  	.blog .site {
  		margin-top: 100px;
  	}
  	.single .site {
  	    margin-top: 130px;
  	}
  }
  @media screen and (max-width: 500px) {
  	.blog .site {
  		margin-top: 150px;
  	}
  }

• 

  lifeismeantforexploring · Member · Mar 29, 2017 at 10:17 pm

  • Copy link

  Looks to have done the trick! We just want to say thanks for being so helpful, it looks like you do a lot to help out the wordpress community.

  Until the next one,
  Tj & Alli

• 

  thesacredpath · Member · Mar 30, 2017 at 8:59 pm

  • Copy link

  Tj & Alli, you are welcome.