Support » Themes and Templates » [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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Is it the same issue as this post?

    HTH

    David

    esmi

    (@esmi)

    Forum Moderator

    Nope. Looks like a different issue.

    esmi

    (@esmi)

    Forum Moderator

    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

    Michael

    (@alchymyth)

    Forum Moderator

    #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=168

    Not 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.png

    Create 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 adjust position:, 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 file

    How 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!

    Katie

    (@weviva234107)

    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 🙁

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Theme:Twenty Eleven] Dropdown Menu/Post template issue’ is closed to new replies.