1

I have view slideshow setup (with views slideshow module) to display some fields (image, title, node teaser) on very top of content area on front page. Also i have drop-down menu setup (with nice menu module). Now, when menu is expanded it goes over slideshow fields, but when slideshow auto-rotates it then position it self in front of menu and never go back again (until i reload page). I tried to solve this with z-index with no luck.

here is a screen shot when image go in front of menu. enter image description here

Any one had same problem? Can any one point me in right direction?

Improve this question
5
  • 1
    I'm not expert on this issue but I did have a similar issue with my slideshow. z-index acts weird, with absolute/relative position and floats, I had to my issue with trial and error. Hope this points you in the right direction
    – iStryker
    Commented Jul 23, 2011 at 16:14
  • can you provide a URL?
    – user842
    Commented Jul 23, 2011 at 16:35
  • Did you try putting a max-width on it/overflow:hidden? Or, are all of the parent divs/classes in relation to the menu positioned too? It is total trial and error though.
    – Graham
    Commented Jul 23, 2011 at 17:38
  • Thanks all for comments & help. I solved problem with adding some more z-index style def on wrapper tags until i found one that did the trick.
    – Nebojsa
    Commented Jul 24, 2011 at 20:13
  • Thank you. Your comment (Nebojsa Jul 24 '11 at 20:13) helped me to solve the same problem. I had to set the z-index of .navbar-collapse.collapse to 20 (more than 5).
    – drupalfan
    Commented Aug 8, 2018 at 11:10

3 Answers 3

Reset to default
1

Try adding a "display: relative" to the outer div that wraps the slideshow.

Improve this answer
1
  • There is no "relative" option for "display" property. Do you mean "position: relative" ?
    – Sinan Erdem
    Commented Jun 17, 2013 at 8:26
0

Update your CSS by setting the position to relative and the z-index to -1, refer this code:

#views_slideshow_cycle_main_special_collection_slideshow-block {
    position: relative;
    z-index: 1;
}
Improve this answer
0

Set the z-index of wrapper tags (e.g. .navbar-collapse.collapse) to a value greater then 3.

None of the wrapper tags of the dropwdown menu should have a z-index of less then 4. I set .navbar-collapse.collapse to 20 to get it work.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.