Jump to content
alisamski

Classic Menu Dropdowns conflicted with superfade

Recommended Posts

Rob    547
Rob

Hi,

 

Sounds like Superfade is creating a z-index conflict with the menu.  I don't think it's anything more complex that that.

 

Are you able to find the z-index for both using Firebug or Chrome's Inspection Tool?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

yeah just playing around... and I cannot locate the z-index using firebug

 

looking at firefox... did you install a particular plugin to firebug to see z index?

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

When I installed the superfade plugin the menu's appeared up as your screen image. Had to add the css to get the nav and content area below it.

#header {height:185px; max-width:1024px;margin-top:20px;}
.section-branding .mainlogo-link, .section-branding .mainlogo-img {
    display: block;
    margin-left: -20px;
    max-width: 100%;
}
.mainlogo-link {max-width:350px;}

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

So apparently I need to add css in order to get the navigation menu below the superfade .

 

am I missing something here?

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

It would appear that the superfade plugin has a z-index conflict as I first thought.  If you look now at the drop down, the top level and first of the child level menu items work fine. As soon as they meet the same level of height as the superfade, the menu shuts and the second and third child items are unclickable.

 

I think the solution is to reposition the superfade to a different location no where near the menu.  Then you won't need CSS and won't have any problem.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

I'm not meaning to be persnickety... as you have a supported plugin that goes with the framework theme.

 

If I want a header image to have multiple sliders... you have a plugin to do that. I may add that it is a much used feature with other themes. And a good feature.

 

Not an option to "just move it elsewhere" as I want a rotating header image.. hence implementing the superfade, and not having to add an animated gif there.

 

Superfade implemented, kicks  BOTH  classic navigation and nav bar z-index behind the content.

 

Can we resolve this?

 

Not being disrespectful Rob, perhaps another staff member has a solution instead of "just not using it."

 

I left both navigations on the page.

Share this post


Link to post
Share on other sites
Simon    247
Simon

I think you added the superfade effect to the entire #header. The nav is in the #header so your having to add css to move it.

 

If you had applied the css fade to the branding section instead you would not need any css. http://screencast.com/t/1sXdNSvT

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

Thank you Simon... I will try that and get back. ^_^

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

Simon that resolved it. Inside the Superfade settings I swapped out #header to #branding

CSS to set static height and max-width of the slides to keep it responsive without cutting off the bottom of the images.

 

#branding {height:185px; max-width:1024px;}

:D

Share this post


Link to post
Share on other sites
Simon    247
Simon

I think i used .section-branding 

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

switched css to

.section-branding {height:185px; max-width:1024px;}

and works too.

 

Thanx

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • tsalstrand
      By tsalstrand
      In Pagelines 2.0, Adam Munns created a plugin called Superfade that was free and based upon Scott Robbin's jQuery "Backstretch" script.
       
      Well, while that might not be available for DMS, I'm trying to just load the script and write a little jQuery to make it work.  Scott Robbin's gave some instructions on his website, but for the life of me, I can't get it to work for the background of one of my elements.
       
      I'm trying to get it to work on this page: http://convertwith.me/our-process/
      For the ID #pl_area3o2o3m which has a class equivalency of .tester-area
       
      This is what I have in the "custom scripts" area:
      <script> $(document).ready(function() { $("#pl_area3o2o3m").backstretch([ "http://dl.dropbox.com/u/515046/www/outside.jpg" , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg" , "http://dl.dropbox.com/u/515046/www/cheers.jpg" ], {duration: 3000, fade: 750}); }); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script> <script src="jquery.backstretch.min.js"></script> I've also try switching out the ID for the class .tester-area
       
      jquery.backstretch.min.js is loading properly, so it has to be how I'm calling it in, but I can't figure out where I'm missing the mark.  

      Suggestions would be great!
       
      Thanks,
      Steve
    • ScottC
      By ScottC
      Is there a way to change the backgrounds from fitting to the full page? Before i had one background that left bars on the side of the page. Also, when i enable super fade, the content shadow disappears. Is there a way to get that back or even edit that to an opaque white background? 
       
      I searched around and did not find an answer to this. Please forgive me if this is an stupid question, I am new to this.
       
      Thanks
    • mbreese1
      By mbreese1
      Hi Adam!
       
      Thanks a bunch for all the great plugins Unfortunately I've hit a duh speedbump. I want to *just* have superfade on one page but don't now how. I can turn off all other pages with page-specific css but that seems like a lot of unnecessary css. I've got
      .page-id-113 .backstretch { position: fixed!important; visibility: visible !important; } but obviously that doesn't do anything to NOT show superfade on every other page. Any help would be greatly appreciated

      Bree
×