BlueOwlCreative » Topic: Custom Header

Custom Header

educredu — Wed, 18 Nov 2015 15:19:53 +0000

Looking for some guidance on how a custom header could be implemented across the top instead of just the logo in the top left corner? Example site: Take the patterned image header bar from educredu.me and put on educredu.com

Reply To: Custom Header

BlueOwl — Wed, 18 Nov 2015 17:08:47 +0000

You mean set it as your header background? This shouldn’t be hard, use simple CSS:

#header {
    background: SET IMG URL HERE;
}

Reply To: Custom Header

educredu — Sat, 21 Nov 2015 00:07:32 +0000

That worked! Now, I’m trying to move the header logo to the left (maybe 20px out from the side) and make the sticky header use the same background image. How do I do that?

Reply To: Custom Header

BlueOwl — Sat, 21 Nov 2015 10:51:05 +0000

Hi again, which URL are you working on?

Reply To: Custom Header

educredu — Sat, 21 Nov 2015 14:57:00 +0000

educredu.staging.wpengine.com

Trying to make it look similar to educredu.me before promoting to Educredu.com

Reply To: Custom Header

BlueOwl — Mon, 23 Nov 2015 09:42:36 +0000

Oh, now I see, so you want your header content to be fluid, not within the wrapper? Add this to your Child theme’s CSS file:

#header .container {
    width: 94%;
}
.container.mega_menu_holder {
    width: 100% !important;
}

Reply To: Custom Header

educredu — Mon, 23 Nov 2015 20:18:28 +0000

The only two remaining challenges seem to be:

1) When I resize the window (make it narrower) the header bar disappears and the three lines show up instead in the top right; and

2) When I scroll down I just see the black background, I want to keep the pattern in place.

I’ve now got the following defined:

#header {
background-image: url(http://educredu.staging.wpengine.com/wp-content/uploads/2015/11/Header.png);
background-size: 44px 64px;
background-repeat: repeat-x;
}
#header .container {
width: 94%;
}
.container.mega_menu_holder {
width: 100%;
}

Thanks for all your help so far!!!

Reply To: Custom Header

BlueOwl — Mon, 23 Nov 2015 21:24:23 +0000

Hi again,

The “3 lines” as you call them are the responsive Menu, this is expected behavior, the regular Menu disappears on smaller screens and the responsive one shows.
You can have you bgr as well in responsive if you wish … notice the !important clause I added.

#header {
background-image: url(http://educredu.staging.wpengine.com/wp-content/uploads/2015/11/Header.png) !important;
background-size: 44px 64px;
background-repeat: repeat-x;
}

The responsive menu becomes hard to see though, I see you have noting in your navigation though, maybe you want to remove the reponsive menu as well?

Reply To: Custom Header

educredu — Mon, 23 Nov 2015 21:55:27 +0000

Yes, how do I do that? I may yet want to put a SIGN IN link in the top right corner.

The only remaining weirdness occurring is the background image changes proportionately when viewed in a smaller browser screen.

Reply To: Custom Header

educredu — Mon, 23 Nov 2015 21:55:58 +0000

And for that matter, when I scroll down the page.