Eleven40 Pro Heder image and nav color

[nathanj1023]

Hello - been working tonight on trying to migrate my site to Genesis theme.

2 questions:

1. How can I change the color of the sticky site header?

2. I'd like to add a sitewide banner below the sticky header. I've googled and successfully removed the site tag from the theme that used to be below the header, but am having trouble getting an image plugged in in it's place. Any help would be greatly appreciated!

site: http://betterbibleteachers.com/

thanks

http://betterbibleteachers.com/

[William]

#1

.site-header {
    background-color: grey;
}

#2

Register a widget area, and hook it using "genesis_after_header" 🙂

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[brock]

Hey,

You can change the color of the header by finding this selector in your style.css file:

.site-header {
background-color: yourcolor;
}

As for adding a site-wide banner, you could add this in your functions.php:

//* Hooks a sitewide banner before the header
add_action( 'genesis_after_header', 'bc_site_wide_banner');
function bc_site_wide_banner() { ?>
<div class="site-wide-banner"><img src="YOUR IMAGE HERE" alt="this describes the picture"></div>
<?php } ?>

Note: Watch out for those closing php tags. Try adding the snippet to the end of your functions.php file so you don't get any errors.

And some basic styling for the site wide banner to your style.css file:

/* Site Wide Banner */
.site-wide-banner > img {
	height: 300px;
	width: 100%;
}

You can adjust the values according to how you want your image to display. This will create a banner that goes the full width of the page.

[brock]

William and I responded at the same time, but if you don't know how to add a widget area (I'm guessing you don't) then this might be helpful. Adding a widget would probably be neater but this will work too. Good luck.

[nathanj1023]

Thank you William and Brock. And Brock - thanks for the detailed code snippets. You are correct in assuming that I ain't no code head 🙂

I am going to try this tonight and see how it goes.

I should have added this to my original question..but how hard is it to also back that banner image a link?

thanks again

[nathanj1023]

getting close...

http://betterbibleteachers.com/

can you help me get it centered, help is scale down proportionally when the browser winder gets smaller and add a link to the image?

thanks

[nathanj1023]

also...I'd prefer the header not show on other page templates, like this one:

http://betterbibleteachers.com/take-a-load-off-save-oodles-of-time-delegate-curriculum-to-me/

[brock]

Sorry for the delayed reply. If I were you I would replace the banner image on mobile screens. Honestly, this has enough detail that I almost want to recommend you hire someone for a one-off customization job. But go ahead and try replacing the code I gave you with this...

functions.php:

//* Hooks a sitewide banner after the header
add_action( 'genesis_after_header', 'bc_site_wide_banner');
function bc_site_wide_banner() { 
    if ( is_page('1375') ) {
        return;
    }
?>
<div class="site-wide-banner wrap"><a href="GO HERE WHEN CLICKED"><img src="YOUR IMAGE HERE" alt="this describes the picture --> escape you\'re quotations"></a></div>
<?php } ?>

css:

.site-wide-banner > img {
    text-align: center;
    margin: probably add some;
}

@media screen and (max-width: 750px) {
    .site-wide-banner {
        display: none;
    }
}

Note that this is hiding the image at 750 pixels. This is the stop-gap solution I recommend until you create another image to replace it on smaller screens. Also, note that the banner is hidden on that page you specified. You said other templates but only provided the one. A site wide banner generally means being every page on the site. Best of luck.

[Author]

Posts