[Theme:Twenty Eleven] Dropdown Menu/Post template issue
-
So i am working on the twenty eleven template. Yes this is the child theme not the original. I wanted the header text to be on top of the header image and the search box then to align up or be on the nav bar. So i tried the following trick and it worked; here is the code, yes the comment line i purposely didn’t print here
[CSS moderated as per the Forum Rules. Please just post a link to your site.]
The problem however it seems to be when ever i hover now over a dropdown menu, I can’t click the sub-menu options the dropdown menu appears but as I try to click any of them the dropdown immediately disappears. To see what i mean go here:
http://newsite.sidmun.com/ Hover over the text Community and try to click a sub-menu..
I think I’ve isolated the problem down from the above code to this part:
/* Colours the search form and keeps it on top */ #searchform {background-color: #ddd; z-index: +10;} #main {top: -185px; position: relative; z-index: +20;}
But its a important part I need or the search bar for whatever reason goes missing out of the site..
Next problem is the Post template issue
But i highly think its related to the CSS problem above.
See on:http://newsite.sidmun.com/2011/09/02/hello-world/
The Posted on September 21st, date is in the top corner left while the content is in middle center? yea.. thats the problem, in admin mode The edit button is right below that date. And no I didn’t edit page.php or index.php template files from the original, I imported them by putting twentyeleven as the template name in style comment.Anyhelp would be deeply appreciated.
-
Nope. Looks like a different issue.
Try removing all of your custom css from your child’s stylesheet. I suspect that it’s a z-index/layering issue caused by something in that css.
The site is also using the BuddyPress plugin, so it could be something to do with that, but if it works when you remove the search from the #Access div, them it could be Jquery, try wrapping the search in a new div.
Same in IE, FF and Chrome!
HTH
David
#main {top: -185px; position: relative; z-index: 1;}
if you need the
z-index: +20;
as you had it, then you have to keep looking.obviously, i can’t see the ‘edit’ button; you have to use one of the free tools such as firebug to find out why the button is where it is.
You guys are sure a great fast responsive community
Ok first the stuff i think i fixed, the date “Posted on September 21st”, which was all over the place was fixed when i changed the css in the following from absolute to static for position see below
Before.singular .entry-header .entry-meta { position: absolute; top: 0; left: 0; }
After
.singular .entry-header .entry-meta { position: static; top: 0; left: 0; }
Works, though i wanted to delete position property alltogether but when I did, the parent css style overided my child theme css , so i had to keep it in there and just changed it to static, hopefully it won’t break anything later on π
I fixed the Edit link in the same manner,
BEFORE.singular .entry-meta .edit-link a { bottom: auto; left: 50px; position: absolute; right: auto; top: 80px; }
AFTER
.singular .entry-meta .edit-link a { bottom: auto; left: 50px; position: static; right: auto; top: 80px; }
Now back to the drop-down, I followed the above poster’s advice to use Firebug, and also change z-index, it didnt fix the drop down problem.
Update: I’ve fixed this up, its ridicously ameateur compared to you CSS masters and everyday coders, i’m just starting wordpress as well so correct me if i am doing something so well amateur. I used firebug and played around disabling/enabling position property
Fix for drop down box:
BEFORE/* BEGIN FIX DROP DOWN */ #branding { border-top: 2px solid #bbb; padding-bottom: 10px; position: absolute; z-index: 2; } /* END FIXED DROP DOWN */
AFTER
/* BEGIN FIX DROP DOWN */ #branding { border-top: 2px solid #bbb; padding-bottom: 10px; position: static; z-index: 2; } /* END FIXED DROP DOWN */
But above will break how your search bar is located so do the following below to fix search bar placement
What i changed here is the margin-top property, and right property rest is as is, for the full code see below paste bin
#branding #searchform { background-color: white; display: block; margin-top: 195px; position: absolute; right: 12.6%;
Tadaaa! see example @ http://newsite.sidmun.com
Since twentyeleven is a very popular theme and Im sure there will be others who will be attempting the same journey as I am, I have copied my whole style to help out anyone as needed. Provide feedback and if something breaks or you have a rather better version of my above mess π
Here is link: http://pastebin.com/JpVXS5QY
Update: hmm it seems the date being out of place or the Edit button being out of place wasn’t an issue, i think its natural..i think?
see: http://twentyelevendemo.wordpress.com/2011/05/04/featured-posts-in-twenty-eleven/
or http://floriblog.com/?p=168Not quite there yet, no doubt a lot of your members will be using other devices, on a large screen (22″) the search is outside the content area, as you resize for different browser sizes it changes position.
http://digitalraindrops.net/images/sidmun.png
On a Mobile (resize browser to test) the title will obscure the menu
http://digitalraindrops.net/images/sidmun-mobile.pngCreate a style block for a mobile version, add in styles for your child theme, this is from my website twenty eleven child theme, I do not use the
#branding
header image, you might need to adjustposition:
,float:
,margin:
etc:/* ! Layout for mobile version */ @media handheld, only screen and (max-width: 767px) { #site-title { margin: 1em auto; padding: 1em 0 0; } #site-title a { font-size: 18px; line-height: 24px; } #searchform { margin-top: -1em; } #site-description{ display:none; } .singular .entry-title, .entry-title { font-size: 16px; line-height: 1.5em; padding-top: .5em; } }
http://digitalraindrops.net/images/raindrops-mobile.png
Regards
David
Just a caveat to this, there are styles for small devices in the twenty eleven style.css lines 2359 to 2482, these adjust the layouts for small devices.
The child style.css is loaded last and as you have changed the style of the search, title and description in the child theme, the mobile rules are cascaded up a level.
You need only to add these small device styles again for styles you have changed in the child theme, so you could just copy them from the parents style.css and remove the other lines.
HTH
David
Hey there, followed your advice
http://pastebin.com/dUhyAtL3
theres my css fileHow does it look on iPhone, the only problem is selecting text from mobile phones, I had a huge issue with z-layering and i ended up deciding the navigation menu should have a z-index of 3 as it was more of a issue not to be able to select dropdowns than having to select content text.
Also how does the search bar look on the normal browser? To me on my 1337 size screen and on 1024 screen both looked great, in the right place, but I not sure if ok elsewhere
much thanks
My submenu is disappearing before you can click on it. Can anyone help??
My site is http://www.sitkasoundsciencecenter.org
It seems to be happening on the Sitka Whalefest Tab.
Any help appreciated!!!
@frontdesk@carsondorn.com
Were you able to figure out your “submenu” disappearing before you can click on it” issue? I am having the same problem. Very frustrating and little support for this issue!
Same here…
I have the main menu setup but cannot get the drop down menu to work.
The used drag drop feature in Appearance-> Menu to create a drop down but when i try to click it on the page, it disappears.
And under Menus-> theme location, it says “Your theme supports 1 menu. Select which menu you would like to use.” any changes to be made here?What am i missing? Pls help ths novice user π
- The topic ‘[Theme:Twenty Eleven] Dropdown Menu/Post template issue’ is closed to new replies.