WordPress.com Forums » Topic: Move menu bar above header in Twenty Eleven?

thesacredpath on "Move menu bar above header in Twenty Eleven?"

thesacredpath — Wed, 27 Jul 2011 02:19:10 +0000

You are welcome.

@sheri, yes it is cool being able to move the nav so easily. With the parent element having position: relative; set, the position absolute and top value will relate to the parent element. On older themes, you have to go in and set the parent to position relative, but on many of the newer themes, that is already done.

susanrileyphotography on "Move menu bar above header in Twenty Eleven?"

susanrileyphotography — Wed, 27 Jul 2011 01:07:02 +0000

Thanks to you both! I love the menu being up on top and I so appreciate the extra coding suggestion for the header - I definitely like it better. Have a great week!

designsimply on "Move menu bar above header in Twenty Eleven?"

designsimply — Tue, 26 Jul 2011 23:46:21 +0000

Note that if you do that, it will override what you set in the Appearance → Header page, and you would have to change the header image through the Custom CSS page instead of in the settings as long as the background url is set manually like that.

designsimply on "Move menu bar above header in Twenty Eleven?"

designsimply — Tue, 26 Jul 2011 23:44:08 +0000

Neat how a position change works on a theme like that. :)

Cute photos! I love photography.

I noticed you're stretching the header image from 100x288 to 850x300 and I think it would look nicer if you displayed the custom header image more like this:

header#branding a img {
display: none;
}
header#branding {
background: url(http://srileyphoto.files.wordpress.com/2011/07/cropped-header1.jpg?w=853) no-repeat 0px 40px;
height: 284px;
width: 850px;
}

thesacredpath on "Move menu bar above header in Twenty Eleven?"

thesacredpath — Tue, 26 Jul 2011 18:09:30 +0000

For the menu, give the following a try, but make sure and check the site when logged in and logged out. Sometimes the positioning declarations can be a little tricky, but I think this will work in both cases. It appears like you got the box shadow in there on your own. Congrats on that!

#access {
position: absolute;
top: 0;
}

#branding img {
margin-top: 43px;
}

timethief on "Move menu bar above header in Twenty Eleven?"

timethief — Tue, 26 Jul 2011 15:28:10 +0000

I don't help with CSS editing. Only 1 Volunteer usually does when he can but when you purchase a custom design upgrade you do get Staff support. While you are waiting you may wish to search the threads produced by a forum search as your questions may have already been answered.
http://en.forums.wordpress.com/tags/twenty-eleven
Also note > When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

susanrileyphotography on "Move menu bar above header in Twenty Eleven?"

susanrileyphotography — Tue, 26 Jul 2011 15:24:07 +0000

One more thing....could you also provide the CSS for making a box shadow for the page? Thanks!

susanrileyphotography on "Move menu bar above header in Twenty Eleven?"

susanrileyphotography — Tue, 26 Jul 2011 14:22:48 +0000

Hi there! I'd like the CSS code for moving the menu bar to be above the header image in the Twenty Eleven theme. My website is http://susanrileyphotography.com. Thanks!