Bloggy theme CSS – move nav-menu under header image
-
Hi all… again…
Looking to move my nav-menu underneath my header image, instead of on top. But I would like to keep the spacing between them the same.
Many thanks!
KarenThe blog I need help with is: (visible only to logged in users)
-
Hi Karen, I’m not seeing a header image on your site, and I see you have made a number of CSS customizations so far. If you can add your header, we can help move it down below the image, but it would be much better to have your image in place so that we can make sure and get things right for you.
-
Here’s the screen shot. The header image is the girls face.
[URL=http://s1373.photobucket.com/user/karenpkahn/media/Mobile%20Uploads/image_zpsd10c9738.jpg.html][IMG]http://i1373.photobucket.com/albums/ag390/karenpkahn/Mobile%20Uploads/image_zpsd10c9738.jpg[/IMG][/URL]
-
You are going to have to remove this from your custom CSS or the forced-open minified menu will obscure part of your first post.
#menu-menu-1 { display: inline-block; }Find this rule in your custom CSS and replace it with the following.
toppart #mainnav { display: table-row-group; float: none; margin-bottom: 20px; max-width: 100%; position: absolute; text-align: center; top: 420px; width: 94%; z-index: 100; }This isn’t perfect, but given the structure of the HTML it is about the best we can do without having to create a whole bunch of Media Queries to control placement at a number of different browser window/screen widths.
See what you think.
-
Thank you!
That worked, mostly. It’s not centered under the header, it’s off to the left.
I changed it to:
#toppart #mainnav {
display: table-row-group;
float: none;
margin-bottom: 30px;
max-width: 100%;
position: absolute;
text-align: center;
top: 590px;
width: 94%;
z-index: 100;
} -
-
Karen, I’m having troubles getting your site to load fully. It seems twitter and some of the other social networks aren’t connecting. I’ll keep checking through. The problem is it is keeping the CSS from fully loading so I can check things.
-
Actually, I was able to guess. Add this to your custom CSS and see if that doesn’t center the nav.
ul.nav-menu { display: inline-block; } -
Thank you again! That centered it.
But there’s another issue I just noticed… The nav menu under the header image looks great on a PC, but on an iPad the nav menu is on top of the blog entry….
Ugh. Is this too complicated to fix… The layout on a PC vs a tablet?
:(
-
You’ll need to add some media specific queries to your custom CSS. Here’s some information on doing that:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
Let me know what you work out and I can take a look. :)
- The topic ‘Bloggy theme CSS – move nav-menu under header image’ is closed to new replies.