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?

  • 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 Jul 23 '11 at 16:14
  • can you provide a URL? – user842 Jul 23 '11 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 Jul 23 '11 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 Jul 24 '11 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 Aug 8 '18 at 11:10

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

| improve this answer | |
  • There is no "relative" option for "display" property. Do you mean "position: relative" ? – Sinan Erdem Jun 17 '13 at 8:26

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 | |

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, privacy policy and cookie policy

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