ThemeShaper Forums » Thematic

[closed]

Submenu below second row of links, not clickable

(7 posts)
  • Started 3 years ago by elderberry
  • Latest reply from elderberry
  • This topic is resolved
  1. elderberry
    Member

    Tried playing with z-index but no fix yet. The menu has enough items to display in 2 rows. If you hover over a link in the top row the second level links show underneath the second row of 1st level links. You cannot click anything in the second level. Here's the example http://withthespiritofthehorse.com/about-2 just hover over News, About or Services...

    maybe someone with a sharper brain than mine will see the solution, Thanks!

    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
    	margin:	0 10px 0 0;
    	padding:		0;
    	list-style:		none;
            z-index:100;
    }
    .sf-menu {
    	line-height:	1.0;
    }
    .sf-menu ul {
    	position:		absolute;
    	top:			-999em;
    	width:			10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
    	width:			100%;
    }
    
    .sf-menu li:hover {
    	visibility:		inherit; /* fixes IE7 'sticky bug' */
    }
    .sf-menu li {
    	float:			left;
    	position:		relative;
    }
    .sf-menu a {
    	display:		block;
    	position:		relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    	left:			0;
    	top:			6em; /* match top ul list item height */
    	z-index:		999;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    	top:			-999em;
    	z-index:		1000;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    	z-index:		1001;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    	top:			-999em;
    	z-index:		999;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    	z-index:		999;
    }
    Posted 3 years ago #
  2. it could be that superfish is busted.... look in your firebug console you will see that "jquery is not defined". i checked your source code and you are using wp-minify and google's jquery. minify does not pull in the google-hosted jquery, b/c by default it only get's self-hosted scripts.

    minify puts its minified script at the very top of the page, which comes before the google jquery is defined....

    couple of options:

    1. you can switch to self-hosted jquery (stop using the google version). i believe in WP3.2 they've updated the jquery version anyway. and if you're minifying and caching you probably don't save anything performance-wise by using the google version. this is what has worked best for me.

    2. possibly try telling wp-minify to minify the google version of jquery. haven't be able to get this to work. haven't had much success w/ this.

    3. possibly add minify's conditional tags to the header, but at the end. this might put the minify scripts after the google jquery. i haven't tried this in a while so i'm not sure if it is still working:

    /*prepare WP-Minify plugin to play nice w/ google's jquery*/
    function add_minify_location(){
    	//if (class_exists('WPMinify')) {?>
    
    <!-- WP-Minify JS -->
    <!-- WP-Minify CSS -->
    
    <?php //}
    }
    add_action('wp_head','add_minify_location',9); //put this right after the reference to google's jquery

    i've had a lot of problems w/ minify lately, which sucks b/c it is a great, great idea. see if fixing minify helps. or maybe see if it is still an issue if you disabled minify.

    sidenote- no offense, but your blue text on reddish background is brutal on my eyes. consider using something much higher contrast.

    Posted 3 years ago #
  3. elderberry
    Member

    Helga thanks very much. I will report back what ends up working... The text/background contrast (or lack thereof) -- This is what the client wants. I at least got her to change most of the body text to gray. But I will let her know your feedback.

    Posted 3 years ago #
  4. so the client doesn't actually want anyone to read the site?

    maybe pass this along:
    http://www.informationarchitects.jp/en/100e2r/

    best of luck

    Posted 3 years ago #
  5. elderberry
    Member

    Well, no luck yet. Here are the things that did not work.
    1) upgraded to wp-3.2 and commented out the smart jQuery inclusion in functions.php.
    2) Then I uncommented and added your code.
    3) Then I commented smart jQuery inclusion and disabled wp-minify.

    If I am using it correctly the Firebug console is giving no error warning.

    Posted 3 years ago #
  6. well i wanted to rule out broken jquery. that's given me hell w/ menus before.

    find

    .sf-menu, .sf-menu * {
    margin: 0 10px 0 0;
    padding: 0;
    list-style: none;
    z-index: 100;
    }

    get rid of z-index here

    Posted 3 years ago #
  7. elderberry
    Member

    Thanks Helga - that did not work, but led me to remove z-index from #access and now it is WORKING!! I really appreciate all you do for those of us using Thematic.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.