Move menu bar above header in Twenty Eleven?

susanrileyphotography · Member · Jul 26, 2011 at 2:22 pm
Copy link

Add topic to favorites
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!

The blog I need help with is: (visible only to logged in users)
susanrileyphotography · Member · Jul 26, 2011 at 3:24 pm
Copy link
One more thing….could you also provide the CSS for making a box shadow for the page? Thanks!
timethief · Member · Jul 26, 2011 at 3:28 pm
Copy link
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.
https://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/
thesacredpath · Member · Jul 26, 2011 at 6:09 pm
Copy link
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;
}
```
designsimply · Member · Jul 26, 2011 at 11:44 pm
Copy link
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 100×288 to 850×300 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;
}
```
designsimply · Member · Jul 26, 2011 at 11:46 pm
Copy link
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.
susanrileyphotography · Member · Jul 27, 2011 at 1:07 am
Copy link
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!
thesacredpath · Member · Jul 27, 2011 at 2:19 am
Copy link
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.

No items found.