WordPress.org

1. TheLastLegion
   Member
   Posted 1 year 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 1 year ago #
   

   Is it the same issue as this post?

   HTH

   David

3. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #
   

   Nope. Looks like a different issue.

4. esmi
   Theme Diva & Forum Moderator
   Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 10 months 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 10 months 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.