Header Placeholder

• 

  booncroft · Member · Dec 24, 2016 at 12:48 am

  • Copy link
  • Add topic to favorites

  so chat help was unable to rectify my issue as there is a glitch in the theme’s formatting and currently an internal requested was sent to fix the issue. In the meantime I was refereed to this forum to possibly help find a workaround as the template is cutting off the bottom of my header image even though it is perfectly formatted to spec.

  Can I change the height of the header placeholder in CSS? If so can you please help me figure out how?

  Best,
  Dustin

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

• 

  thesacredpath · Member · Dec 24, 2016 at 3:00 am

  • Copy link

  Hi Dustin, I think this is about the best we can do with CSS. Add this to the very bottom of your custom CSS below all other CSS.

  body.hero-image .hero.without-featured-image {
  	padding-bottom: 300px;
  }
  @media screen and (min-width: 1230px) {
  	body.hero-image .hero.without-featured-image {
  		background-position: bottom center;
  		padding-bottom: 250px;
  	}
  }
  @media screen and (min-width: 1020px) {
  	body.hero-image .hero.without-featured-image {
  		padding-bottom: 350px Qimportant;
  		background-position: bottom center;
  	}
  }
  @media screen and (min-width: 768px) {
  	body.hero-image .hero.without-featured-image {
  		padding-bottom: 350px;
  		background-position: bottom center;
  	}
  }
  @media screen and (min-width: 600px) {
  	body.hero-image .hero.without-featured-image {
  		padding-bottom: 250px;
  		background-position: bottom center;
  	}
  }

• 

  booncroft · Member · Jan 9, 2017 at 10:08 pm

  • Copy link

  thank you!

  It’s looking nice now.

  however the section at the top, the greyish/black bar that says CALL NOW is covering the top of the photo and thus the menu bar is pushing into our faces. See what I mean?

  Is there a way to push the photo down below the top CALL NOW bar?

  Thanks!
  db

• 

  thesacredpath · Member · Jan 10, 2017 at 8:01 pm

  • Copy link

  Dustin, this is a bit tricky. We can’t really move the image down as it would then have a gap above it. Find the 600px media query in your custom CSS and change the bottom padding to 350px. That should get your heads just below the transparent header area background.

• 

  booncroft · Member · Jan 11, 2017 at 6:29 am

  • Copy link

  looks better, but now look at the menu items in tablet or cell phone view and the menu is getting cut off. please advise

• 

  booncroft · Member · Jan 11, 2017 at 6:45 am

  • Copy link

  weird, now looking at it after saving 350px isn’t providing enough padding anymore, some reason it changed. not sure why. can you advise? now 500 padding is what’s required but now it’s pixelating the header image

• 

  thesacredpath · Member · Jan 11, 2017 at 11:00 pm

  • Copy link

  Oh my gosh, it appears I had a typo in the code I gave you. Replace it with the following.

  @media screen and (min-width: 1230px) {
  	body.hero-image .hero.without-featured-image {
  		background-position:bottom center;
  		padding-bottom:250px
  	}
  }
  @media screen and (min-width: 1020px) {
  	body.hero-image .hero.without-featured-image {
  		padding-bottom:350px !important;
  		background-position:bottom center
  	}
  }
  @media screen and (min-width: 768px) {
  	body.hero-image .hero.without-featured-image {
  		padding-bottom:350px;
  		background-position:bottom center
  	}
  }
  @media screen and (min-width: 600px) {
  	body.hero-image .hero.without-featured-image {
  		padding-bottom:350px;
  		background-position:bottom center
  	}
  }

• 

  booncroft · Member · Feb 5, 2017 at 5:30 pm

  • Copy link

  whew! Been a while, not back at it finishing up this website. so this code works great now.
  fyi when looking at my website now in tablet/phone view, it appears the menu is getting cut off and the functionality just isn’t there, not sure if this is a CSS issue?

  Best,
  Dustin

• 

  kathrynwp · Staff · Feb 6, 2017 at 4:04 pm

  • Copy link

  Please start a new thread, thanks:

  https://en.forums.wordpress.com/forum/css-customization