Bloggy theme CSS – move nav-menu under header image

lookingupphoto · Member · Oct 9, 2014 at 11:13 pm
Copy link

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

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 10, 2014 at 3:32 am
Copy link
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.
lookingupphoto · Member · Oct 10, 2014 at 3:59 am
Copy link
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]
lookingupphoto · Member · Oct 10, 2014 at 4:01 am
Copy link
That didn’t work… Try this …

<img src=”http://i1373.photobucket.com/albums/ag390/karenpkahn/Mobile%20Uploads/image_zpsd10c9738.jpg” border=”0″ alt=” photo image_zpsd10c9738.jpg”/>
thesacredpath · Member · Oct 10, 2014 at 5:50 am
Copy link
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.
lookingupphoto · Member · Oct 10, 2014 at 2:43 pm
Copy link
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;
}
lookingupphoto · Member · Oct 10, 2014 at 10:38 pm
Copy link
Any idea how to get it centered under the header?

Thanks!
:)
Karen
thesacredpath · Member · Oct 10, 2014 at 11:48 pm
Copy link
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.
thesacredpath · Member · Oct 10, 2014 at 11:51 pm
Copy link
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;
}
```
lookingupphoto · Member · Oct 11, 2014 at 1:52 am
Copy link
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?

:(
shawnajroberts · Member · Oct 21, 2014 at 9:25 pm
Copy link
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. :)

No items found.