[betholson]

This is kind of an old post but for anyone in the future who wants to know how to do it:
Open the Education Pro Theme Editor in wordpress > click on functions.php

Find this section:
//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 300,
	'height'          => 100,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Change the width and height to the size you want such as:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 200,
	'height'          => 200,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Keep in mind that if you change the size of your image to much larger than it already is, you might need to make adjustments to spacing on other pages so that the logo doesn't overlap elements such as the page title.

Good luck!

[betholson]

Here's the clunky way I've managed to KIND OF create a patch for this. If anyone has more feedback about a better, more reasonable or the PROPER way to do this, I'm all ears!

I used Media Queries to change the height of the viewport for various ranges of browser widths. I dragged the browser to a width where the text was dropping down too far and then created a range to change the height of the viewport so that it would include most of the image. When I got to a spot where it was cutting off too much of the image I put that in as the other end of the range so the code I added looks like this:

` /* MEDIA QUERIES */

@media screen
and (min-width: 1800px)
and (max-width: 2200px)
{
.front-page-1 {
position: relative;
height: 800px;
width: 100%
}
/* moves nav further right */
.nav-primary .genesis-nav-menu {
position: absolute;
right: 50px;
}

}

@media screen
and (min-width: 1300px)
and (max-width: 1800px)
{
.front-page-1 {
position: relative;
height: 700px;
width: 100%
}
}

@media screen
and (min-width: 800px)
and (max-width: 1300px)
{
.front-page-1 {
position: relative;
height: 500px;
width: 100%
}

}

@media screen
and (min-width: 480px)
and (max-width: 800px)
{
.front-page-1 {
position: relative;
height: 350px;
width: 100%
}

}

@media screen and (max-width: 480px) {
/* changes height of main image window- viewport */
.front-page-1 {
position: relative;
height: 200px;
width: 100%
}

}`

Again, it feels pretty clunky and very much #ThereIFixedIt but it solves the problem for now and since the site has already gone live we needed something that would at least alleviate the problem some. Hope this helps anyone else out there who ever comes across this kind of issue.

[betholson]

Hey Porter!
Thanks for taking a moment to share your idea! Unfortunately, that was like the first thing I tried and I discovered that Height can't be designated in percentages. Because... I don't know, that would make my life too easy? 😉

[betholson]

Thanks David!
That helped fix a whole bunch of issues I was having!
I guess sometimes we just need another set of eyes to help us see the obvious!
Cheers
Beth

[betholson]

If anyone else is wondering how to do this I was told that wordpress (not specifically Genesis or any child theme) automatically creates a class called .home .

You can target elements on the front page of any site by using that selector. I used the following code to hide the logo just from that front page.

.home .title-area {
	display: none !important;
}

Hope that helps someone else in the future!
Cheers!

[betholson]

Whoa! Thanks Abland! Media Queries are a whole new world of awesome!

[betholson]

Hi Tlee926
I used the Firefox plugin Firebug to look through and test some code and I think if you add this to your child theme or custom CSS it should take care of that text and the black stripe for you. I'm not very experienced either but at least it'll give you something to try!

.page-heading {
visibility: hidden;
}

[betholson]

If anyone is curious how to do this here's what I came up with that changed the code. Hope it helps!

/* removes parallax scrolling of top main page image */
.front-page-1, .front-page-3, .front-page-5, .front-page-7 {
background-attachment: scroll;
  background-color: #fff;
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

/* makes logo and menu scroll with page */
.site-header {
  background-color: #000;
  left: 0;
  /* position: fixed; */
  top: 0;
  width: 100%;
  z-index: 999;
}

[Author]

Posts