<br /> #menu-menu {<br /> display: inline-block;<br /> vertical-align: top;<br /> }<br />

I'm trying to center the menu. I found this code in other posts:

<br /> #menu-menu {<br /> display: inline-block;<br /> }</p> <p>.menu-menu-container {<br /> text-align: center;<br /> }</p> <p>#access {<br /> padding-left: 0;<br /> }<br />

It works, however adds space below the menu items. This can be seen when mouse is hovering over the menu. Any insight on how to fix this?

For the record, mfields and designsimply were a huge help, so major props to them.

Happy blogging!

Am I supposed to copy & paste the code you wrote after what's already there?

Ah! You can delete what's there, then copy and paste what's above. :-)

@media (max-width: 650px) {
#branding,.header-link {
min-height:80px;
}
}

@media (max-width: 480px) {
#branding,.header-link {
min-height:60px;
}
}

Am I supposed to copy & paste the code you wrote after what's already there?

The only caveat in this case is that the "background-size" property is CSS3 and so it's not supported in all older browsers, like IE 8. You can see this browser background compatibility chart:

http://www.quirksmode.org/css/background.html

In Appearance -> Custom Design -> CSS, you can add the following to your CSS Editor, then click Save Stylesheet, and it'll work in all up-to-date browsers (I've added comments for reference):

/* for the responsive header image */

#branding {
    background-size: contain;
	background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 1140px) {
	#branding, .header-link {
		height: 120px;
	}
}
@media (max-width: 860px) {
	#branding, .header-link {
		height: 100px;
	}
}

@media (max-width: 650px) {
    #branding, .header-link {
    	height: 80px;
	}
}

@media (max-width: 450px) {
    #branding, .header-link {
        height: 60px;
	}
}

/* removes border for the responsive header image */

#branding {
    border:0;
    box-shadow: none;
}

Thanks.

Is there a code I can put into the header to make it responsive?

Absolutely. You'll need to edit the CSS to do this, which requires the Custom Design upgrade.

If you'd like us to help with this, please reply to this forum thread after purchasing the Custom Design upgrade from the Store in your dashboard, and I'll be happy to move this thread to the CSS Customization forum to help there. :-)

Is there a code I can put into the header to make it responsive? Thanks.

What's the screen resolution on your son's and husband's computers? Can you take a screenshot from their computer, then upload it to your Media Library?

The likely reason is due to a lower resolution setting, where the Bouquet theme maximum width is 1100 pixels.

The reason why the body isn't "cut off" is due to the theme's responsive design.

(2) Changing font colors in text in posts or pages either post by post or page by page using the #4 icon (Select text color – change the text color) in Row 2 the Visual editor. http://en.support.wordpress.com/visual-editor/#row-2

(3) Changing all font families, colors and sizes throughout the whole blog by purchasing an annually renewable Custom Design upgrade and using Typekit Fonts with Staff support. http://en.support.wordpress.com/custom-design/

Note: A few themes do provide for changing font color in the Blog Title and/or optional Tagline and/or links. In the majority of themes font changes to font families, colors and size in the blog title, tagline, menu, post titles, page titles, categories and tags, widget headings, comments, and links cannot be done without CSS editing.

Thanks!

removes the secondary side bar. But if you want it back, you'll have to do some work repositioning it, because once you take out the "recent articles" block, the secondary sidebar floats left.

Hope this helps!

Thank you so much for the code.. I did that and I was able to delete "recent articles" and "more articles" from the showcase page..
BUT

It also Removed 'Secondary Sidebar', how can I have the secondary sidebar back?

Thanks,

Liya

Sorry about that! I've activated the Custom Design upgrade for your blog.

Have a great day!

Any suggestions?

.page-template-showcase-php
#primary {
display:none;
}

#tertiary {
display:none;
}

Like I said, I'm an absolute beginner with css :-)

#primary {
display: none
}
#tertiary {
display: none
}

High five! Hope this helps someone!

If it can't be removed all together, I would settle for being able to rename it. But if I can't get rid of that text, then I can't use this (otherwise awesome) template.

Anyone have advice for me?