WordPress.org

Ready to get started?Download WordPress

Forums

[Theme:Twenty Eleven] Dropdown Menu/Post template issue (13 posts)

  1. TheLastLegion
    Member
    Posted 2 years ago #

    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.

  2. Digital Raindrops
    Member
    Posted 2 years ago #

    Is it the same issue as this post?

    HTH

    David

  3. esmi
    Forum Moderator
    Posted 2 years ago #

    Nope. Looks like a different issue.

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    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.

  5. Digital Raindrops
    Member
    Posted 2 years ago #

    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

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    #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.

  7. TheLastLegion
    Member
    Posted 2 years ago #

    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 :D

    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

  8. Digital Raindrops
    Member
    Posted 2 years ago #

    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

  9. Digital Raindrops
    Member
    Posted 2 years ago #

    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

  10. TheLastLegion
    Member
    Posted 2 years ago #

    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

  11. frontdesk@carsondorn.com
    Member
    Posted 2 years ago #

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

  12. juliem73
    Member
    Posted 1 year ago #

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

  13. Katie
    Member
    Posted 1 year ago #

    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 :(

Topic Closed

This topic has been closed to new replies.

About this Topic