Mix Metro and Copyblogger

[dominadorweb]

Hi, I was trying to edit the code in metro theme but I can't figure how to make a Large Header and Menu, similar to the copyblogger one.

I want to know if someone can help to figure it out. The images speak for itself

http://s3.postimg.org/w2e1hyb9f/antes.jpg

http://s9.postimg.org/jzcpw2w3z/after.jpg

What I want is that header and menu don't keep the 1080 structure, just like on copyblogger that the header is of the large of the screen

Thank you in advance

[rfmeier]

Hello,

The CopyBlogger site uses the .wrap elements within the #header and #nav to provide the 1152px width for the content. The #header element is still 100% width and has a background of black.

Here is an example of what they are doing.

/* will expand the whole width of the page */
#header {
	background: #222; /* black background */
	min-height: 72px;
	overflow: hidden;
}

/* .wrap is withing #header and other parent structure elements */
.wrap {
	margin: 0 auto; /* center the content */
	max-width: 1152px; /* set a width */
}

I hope this helps point you in the right direction.

---

Ryan Meier – Twitter

[dominadorweb]

Thank you rfmeier

I have the metro theme, I don't know what to do, I'm trying using some copyblogger codes but without success. Can someone indicate me what i have to change on the metro theme editor?

Thank you

[rfmeier]

Unfortunately it is going to be a somewhat decent amount of css. Styling this remotely (without source code or development environment) will be a bit of a headache.

---

Ryan Meier – Twitter

[dominadorweb]

that's ok, I will try with a designer here in the company

thank you again

[devnick]

I'm confused.  Wouldn't he want to add/change #wrap to have max-width: 100%  In doing so, I'm not sure what side image you would load into the header.

[rfmeier]

That would probably work.  There are probably a few ways to do this, but I am going off of the Copyblogger markup and the image you supplied.

---

Ryan Meier – Twitter

[Author]

Posts