Eleven40 Pro Header

[Turtle8]

Hello Everyone,

Please could someone offer me some help? I've put tried my best to convert a former Flash site over to WP using Eleven40 Pro and with my very limited knowledge have got the basics completed. However, I'm still having 2 problems that I can't figure out how to fix.

The site is at http://www.widecast.org and I was hoping someone could help with:

1. I've placed a custom header but when I reduce the screen size to see how it appears on smaller screen there is a point where it cuts off the header so it doesn't fill the width of the page. It then does something similar for smaller screen sizes but at least fills the complete header area. I've tried inspecting the element but can't figure out what I need to change in the CSS.

2. I also can't get the primary navigation to match the width of the header image i.e. 1034 px. Its always a bit wider than the nav menu so am wondering if I've changed the header size that I now need to change something to do with the navigation menu width?

I've tried to inspect the elements on the page but can't figure out where I'm going wrong when the screen size changes.

Could anyone help me fix this?

Thanks

http://www.widecast.org

[Brad Dalton]

What height is your header image?

---

Tutorials for StudioPress Themes.

[Turtle8]

Hi,

Its 1034 wide by 222 px high

Thanks

[Brad Dalton]

I suggest you use 1140px width. Any height is ok.

---

Tutorials for StudioPress Themes.

[Turtle8]

Thanks,

I changed .title-area to a width of 1140px, but when I reduce the screen size, I still get the problem where it cuts it in half leaving a big space to the right. Is there somewhere else I should be editing the stlye.css?

Thanks

[Brad Dalton]

You need to change the .title-area to a width of 1140px as well.

---

Tutorials for StudioPress Themes.

[Turtle8]

Thanks Brad, I think I've got it 🙂

Is it possible for the whole header image to be scaled to fit in the title-area depending on the screen size? At the moment it just cuts off the ends of the image depending on the size of the screen. Sorry if its stupid question!

Thanks again

[Brad Dalton]

You can use CSS like this :

.site-inner {
	margin: 287px 0 40px;
}

.site-header {
	background-color: #000;
	left: 0;
	min-height: 222px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

.title-area {
	float: none;
	width: 1140px;
}

.header-image .site-title a {
	display: block;
	float: none;
	min-height: 222px;
	text-indent: -9999px;
	width: 100%;
}

---

Tutorials for StudioPress Themes.

[Turtle8]

Do I just copy that into the style.css?

[Author]

Posts