Move Menu Below Header on Penscratch Theme
-
Hello, I would like very much to move my main navigation bar below my header image with CSS and can’t figure it out despite many tries with absolute positioning and margins, etc. Can someone please help and paste the code I need? Thanks in advance!
The blog I need help with is: (visible only to logged in users)
-
Given that Penscratch is a responsive width theme, and given that the header image is actually located in the site-content div while the menu is in the masthead div, this can’t really be done cleanly and keep everything aligned on all screens (desktop, tablet and phone). This is because when you use position: absolute, the element loses its relationship to all the other elements in the page and is positioned in relationship to the browser window instead. That means that on smaller screens or in narrower browser windows, your menu will then be over the top of your content.
This could be done with a bunch of Media Queries to control the position of the menu for different screen widths, but from looking at things, it would take a good number of them.
Have you looked at other similarly designed themes that have the menu below the header image?
-
No, but I did notice that this Penscratch theme DOES have a “Logo” option that can be above the main nav bar instead of or with the header image.
If I were able to adjust the side of the logo , THAT could work. And thank you for the ridiculously fast response!
-
I tried this for a while – using the logo feature instead of the header. (Like you, I wanted the “header” above the main nav bar). It worked great! But then after about a week, the logo image mysteriously shrank. Now it seems to be coming in at 300px wide. I haven’t changed anything, but I’m wondering if something changed? Are logos now automatically fixed at 300px? It must have changed in the last few days.
Does anyone know how to fix this? I’d like to use the image that runs across the top at a healthy size (i.e. 900 pixels or so), not the mysteriously shrunken one. Here’s the site:
jackewilson.com
Thanks!
-
Jackie! That is the exact same thing that happened to me. I was using the logo happily above the menu bar and suddenly I log into my site last night and it’s changed instantly to about 300px. LAME!
Any one else have any advice?
-
Same thing happened to me. Advice appreciated! And likewise I’d love to lose the lines above and below the menu.
-
-
-
Hi cheneymabel, just wanted to check to see if you’ve started another thread for this one. If you haven’t had a chance, no worries, I’ll give it a try… (I’m new to this so I wasn’t sure if I just wasn’t seeing the new thread and didn’t want to duplicate. Thanks!)
- The topic ‘Move Menu Below Header on Penscratch Theme’ is closed to new replies.
WordPress.com Forums 