WordPress.org

Ready to get started?Download WordPress

Forums

Promotion Slider
[resolved] Slider hides drop down menu (33 posts)

  1. drandle1
    Member
    Posted 1 year ago #

    Promotion Slider has begun to hide my primary drop down menu. Click here and hover over either of the drop down menus for an example.

    I checked to see if I was having a browser issue, but I had the same problem in IE, Firefox, Chrome, Safari, and Torch. So the only thing left I could think of would be the promotion slider itself.

    I'm using the standard wp menu under the appearance tab for menus. Should I get away from the wp standard wp menus?

    This is the first time I've had any problems with this plugin, hopefully somebody can explain to me how-to correct this.

    Thanks for your help!

    http://wordpress.org/extend/plugins/promotion-slider/

  2. Micah Wood
    Member
    Plugin Author

    Posted 1 year ago #

    Ugh.. this has got to be a javascript conflict of some sort. You appear to be running three copies of jQuery... and two versions at that. I am also seeing ga.js included twice, a js color picker being applied to the front end, etc. I would daresay that you have a lot of poorly coded plugins on your site or that the theme has been poorly coded... possibly both.

    I would recommend you start with some basic troubleshooting.

  3. drandle1
    Member
    Posted 1 year ago #

    Ok, thanks! I'll run through my plugins and find the conflict.

    I've got one question. How did find all this out?

  4. Micah Wood
    Member
    Plugin Author

    Posted 1 year ago #

    I opened up your site in Chrome and used the developer tools to view the JavaScript console.

  5. drandle1
    Member
    Posted 1 year ago #

    Google Webmaster Tools. I'm still learning. I have no ideal how-to use those tools.

  6. linkfr
    Member
    Posted 1 year ago #

    Hi guys,

    It seems i'm having the same problem: slider covers drop down menu after update.

    But i took a look at drandle1's blog and it seems you solved it, right?

    Would you please be so kind to let me know how i can solve it too?

    I guess i should add something looking like this?

    .identifiant{
      position:relative;
      z-index:10;
    }

    But what exactly? I'm a beginner.

  7. drandle1
    Member
    Posted 1 year ago #

    Honestly, I cannot take credit for fixing the issue with the promotion slider. I like the slider, but I was having problems with my menu, so I re-positioned the slider elsewhere.

    And the slide on Durwin Randle's Blog, is the default Quick Slider that comes with the PageLine theme. The problem with the Promotion Slider was on PhotoVid Gallery. I kept the slider, I simple re-positioned it on the page. That was my way of working around the issue. It might work for you as well. I moved a few things around, put an image at the top, and the slider further down the page.

    Sorry I wasn't able to give a direct solution. Hope I was able to help.

  8. Micah Wood
    Member
    Plugin Author

    Posted 1 year ago #

    @likfr,

    z-index is the solution to showing your menu on top of the slider and it must be at least 101.

  9. linkfr
    Member
    Posted 1 year ago #

    Hi Micah, thanks.

    I'm a beginner, so i only understood that's the solution... But i still don't know what to do.

    Could you please say what code i should paste?

    There's a custom code section to do so in Pagelines Platform theme i'm using --where i guess i should do it?

    You may find the page's code on Pastebin and a firebug screenshot on Picpaste in case that can help.

  10. linkfr
    Member
    Posted 1 year ago #

    Hi again,

    Does anybody know what z-index would push back the slider so that it doesn't hide drop down menu?

  11. mloga94
    Member
    Posted 1 year ago #

    Hi again
    i have a same issue missing feature slider in Wp 3.5.1 . I tried to inset a code but i can't get into my admin site any longer.

    This is the error message:

    Parse error: syntax error, unexpected T_STRING in /home/mloga94/public_html/wp-content/themes/simple-catch/functions.php on line 135

    This is my website : http://www.logdeluxe.com

  12. linkfr
    Member
    Posted 1 year ago #

    Hi mloga94, You better start new topics, and preferably in the right forum: http://wordpress.org/support/theme/simple-catch (that's what i've been said when i unintentionally included a new topic in a started thread). Anyway, i guess you can solve it by deactivating and eventually deleting the plugin causing trouble from Network Admin.
    If you have no Network Admin or no access to it, delete it through your host's cpanel. That'll at least allow you to access admin again :)

    Back to my question: Please, does anybody know what z-index would push back the slider so that it doesn't hide drop down menu?

  13. Web2Guru
    Member
    Posted 1 year ago #

    EDITED

    Hi linkfr, I didn't read everything here, just following mloga94. In the code you posted, try changing the number 10 to 101, like so:

    .identifiant{
      position:relative;
      z-index:101;
    }

    I'm not sure if this will work, I didn't look in to this at all, just pieced it together from whats been said. I'm just here because mloga also posted on another unrelated topic I'm following, and I was looking to see if he had started a new topic anywhere and found this topic.

    @mloga94, please start a new topic so we don't interfere with other unrelated questions. I've replied on the other topic I'm following.

  14. linkfr
    Member
    Posted 1 year ago #

    Thanks Web2Guru, but that didn't work earlier (indeed i missed the 1 after 10).

    Please, does anybody know what z-index would push back the slider so that it doesn't hide drop down menu?

  15. Micah Wood
    Member
    Plugin Author

    Posted 1 year ago #

    @linkfr,

    The key isn't to push back the slider, but to bring forward your menu. That will depend on your site's markup.

  16. Web2Guru
    Member
    Posted 1 year ago #

    You probably need to set the position:relative and z-index for both the menu and the slider, with the slider z-index set to 10 and the menu z-index set to 101. Post a link and I will take a look.

    Based on the code you posted, I do not see where the identifiant class is used, but this might work:

    .main_nav {
    position:relative;
    z-index:101;
    }
    .promo_slider_wrapper {
    position:relative;
    z-index:10;
    }

    But again, I'm not using this plugin, so I can't be sure. You may not even need the slider settings if it's default z-index is less than 101.

  17. linkfr
    Member
    Posted 1 year ago #

    Thanks a lot, you will find the urls in Pastebin here.

    You might wanna have a look to what Platform theme's guys and i have previously discussed here (namely posts 11, 17, and 18)?

    Hope you'll be able to find a way out.

  18. Web2Guru
    Member
    Posted 1 year ago #

    Perfect! After looking at the links you gave the Platform theme guys, I see that this theme actually uses z-index quite often. The culprit is actually the #header .outline z-index, which was set to 28 and wraps all of the header and navigation. So no matter what z-index you use for the menu or sub-menu, unless you move the slider down below 27 or the header outline above 99, it wouldn't work.

    Also, just for clarification, Rob was incorrect in saying, "You're making the z-index number higher, which sends things further back. Lower the number to bring things forward..." You were correct, "the lower z-index is, the further back the element will show."

    I'm surprised these guys do not know their own code that well and couldn't figure it out. It took me just a few minutes. Here is the code that should fix this:

    #header .outline {
        z-index: 101;
    }

    Also, if you want to remove the fade transition, which shows the background text through the sub-menu for a split second, there is a line in the header.php, in the head of the html, that looks like this:

    jQuery('ul.sf-menu').superfish({ delay: 100, speed: 'fast', autoArrows:  1, dropShadows: 0 });

    ...change it to include an animation setting like this:

    jQuery('ul.sf-menu').superfish({ delay: 100, speed: 'fast', animation: { height:'show' }, autoArrows:  1, dropShadows: 0 });
  19. linkfr
    Member
    Posted 1 year ago #

    Aha, you are a master, thank you so much!

    I found this in style.css:

    /* @ #header */
    	#header .outline{
    		position: relative;
    		zoom: 1;
    		z-index:101; /* ie drop-down fix */

    So i just set z-index to 101 and that is all, it works the way it did before, thanks a lot!

    You are also right about the slider titles visible through submenu's background, i never really noticed it. I found the line you say in themes/platform/sections/nav/section.nav.php and added the line you provided (just added "animation: { height:'show' }," in the middle indeed) but there was no change.

    Anyway, i'm in an excellent mood now since the menu vs slider issue is solved, you did a good action today, thanks a lot!

  20. Web2Guru
    Member
    Posted 1 year ago #

    Happy to help!

    The split-second transition is gone for me, looks perfect! Tried it in the latest version of Chrome and in IE9. Older browsers may be different. I'm not familiar with superfish and it's height setting, there may be another option that works. I stumbled on to that setting when I did a quick search on superfish menus.

  21. linkfr
    Member
    Posted 1 year ago #

    Ok, i'm not really annoyed by that transparency, and i also need to change my computer... so i'll give it a try later.

    Thanks again!!!

  22. kpahl11
    Member
    Posted 1 year ago #

    Hey guys,

    I'm having the same issue w/ the promotion slider suddenly going in front of my drop down menu. But, I'm not using the same theme as discussed here. I'm using Wufoo. I went into my custom.css but I don't see the code discussed here. My web site is Life Community Church. Any suggestions? Thanks very much!

  23. Web2Guru
    Member
    Posted 1 year ago #

    @kpahl11: Your theme sets .menu styles around line 101. It sets the z-index to 50. Change that to 101.

    The original line:

    .menu { position: relative; list-style: none; z-index: 50; }

    The changed line:

    .menu { position: relative; list-style: none; z-index: 101; }
  24. kpahl11
    Member
    Posted 1 year ago #

    Awesome! Thank you so much for your help!

  25. Web2Guru
    Member
    Posted 1 year ago #

    No problem at all, I'm happy that I could help!

  26. harrykhan
    Member
    Posted 1 year ago #

    @web2guru i am having the same prob.. dropdown menu not showing in the menu tab.... actually i am using a template ... it has simple menu but i want to add dropdown list in one of its tab ... and thts nt happeing.. i hav tried hard bt in vain.. i hav also checked the z-index but it wont wrk either... :(

  27. Web2Guru
    Member
    Posted 1 year ago #

    @harrykhan
    It could be a number of things. You say it has a simple menu, could it be that that template does not support drop-down sub-menus? Otherwise, it could be the z-index on one of the other div wrappers, or it could be something else entirely different. Start a new topic and post the site address so we can check it out.

    @ALL
    THIS TOPIC IS SPECIFICALLY FOR ISSUES WHERE THE "SLIDER HIDES DROP-DOWN MENU". IF THIS IS NOT THE PROBLEM YOU HAVE, PLEASE START A NEW TOPIC! No offence intended, but it can be confusing to others when we post back and forth on unrelated issues.

  28. rachelsstorm
    Member
    Posted 1 year ago #

    I'm having this exact problem as well-- the Promotion Slider hiding a drop down menu-- and I have the Calotropis theme. I'm having trouble finding where to change that z-index in my theme's code.

    The website I'm working on is: http://www.fordlibrary.org

    I would appreciate any help you could give!

  29. Web2Guru
    Member
    Posted 1 year ago #

    @rachelsstorm
    Hi Rachel, the element your looking for is the #menu element.

    A little ways down in your stylesheet, look for this:

    /* Menu */
    #menu {clear: both;font-size: 1.4em;font-weight: bold;z-index: 1;position:relative;width:100%;}

    Change the z-index to 2 or 99, like this:

    /* Menu */
    #menu {clear: both;font-size: 1.4em;font-weight: bold;z-index: 99;position:relative;width:100%;}
  30. rachelsstorm
    Member
    Posted 1 year ago #

    When I go to style.css in my Editor, this is all I see (aside from the theme description):

    /* WP requirements */
    .highlight {font-weight: bold;}
    .clear {margin: 0;padding: 0;clear: both;}
    .alignleft {float: left;margin: 5px 10px 5px 0;}
    .alignright {float: right;margin: 5px 0 5px 10px;}
    .aligncenter, div.aligncenter {margin: 10px auto;text-align: center;display: block;}
    img.alignleft {float: left;margin: 5px 10px 5px 0;}
    img.alignright {float: right;margin: 5px 0 5px 10px;}
    img.aligncenter {margin: 10px auto;text-align: center;display: block;}
    .wp-caption {border-width: 1px;border-style: solid;text-align: center;padding-top: 4px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
    .wp-caption img {margin: 0;padding: 0;border: none;}

    Unless I'm looking in the wrong place?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic