Shape 5

We use vertex framework 3.6 or 3.7. When enabling the floating menu and also install BT Content Slider the following happened:

This is like it should be. It is working on the second and following page of this module

(http://www.msgdenbosch.com/temp/below%20menu.png)

This is what happening on the first page

(http://www.msgdenbosch.com/temp/above%20menu.png)

Check our test website http://www.msgdenbosch.com/test (http://www.msgdenbosch.com/test) to see it happening

Can anyone tell me what to do to create a solution?

Hello,

That would be an issue with the z-index values used by the extension. You would need to either increase the z-index of the menu bar or decrease the z-index of the extension images and content. Unfortunately we do not provide direct coding support for 3rd party extensions via the forums.

And where should i change or add the z-index of the floating menu bar?

Hello,

We call the floating menu bar in the s5_vertex_addons.php file on the server. You can either make the changes there or use custom classes in the custom.css file.

I found the solution

The z-index in the floating menu bar is very low. This is set at value 2. I don't understand why this value is so low for a top menu.

Standaard css code in s5_vertex_addons.php:

#s5_menu_wrap.s5_wrap_fmfullwidth {
         <?php if ($s5_fmenuheight != "") { ?>
         height:<?php echo $s5_fmenuheight; ?>px;   
         <?php } ?>
         width:100% !important;
         z-index:2;
         position: fixed;
         <?php if ($s5_menufloattop != "") { ?>
         top:<?php echo $s5_menufloattop; ?>px !important;
         <?php } ?>
         margin-top:0px !important;
         left:0 !important;
         margin-left:0px !important;
         -webkit-backface-visibility: hidden;
         -webkit-transform: translateZ(2);
      }

   #s5_menu_wrap.s5_wrap {   
      <?php if ($s5_menuleftmargin != "") { ?>
      margin-left:<?php echo $s5_menuleftmargin; ?>px;
      <?php } ?>
      <?php if ($s5_menurightmargin != "") { ?>
      margin-right:<?php echo $s5_menurightmargin; ?>px;
      <?php } ?>
      <?php if ($s5_fmenuheight != "") { ?>
      height:<?php echo $s5_fmenuheight; ?>px;
      <?php } ?>
      position: fixed;
      <?php if ($s5_menufloattop != "") { ?>
      top:<?php echo $s5_menufloattop; ?>px !important;
      <?php } ?>
      z-index:2;
      <?php if ($s5_menuleftpadding != "") { ?>
      padding-left:<?php echo $s5_menuleftpadding; ?>px;
      <?php } ?>
      <?php if ($s5_menurightpadding != "") { ?>
      padding-right:<?php echo $s5_menurightpadding; ?>px;
      <?php } ?>
      margin-top:0px !important;
   }   

I have solved it with the following code in the custom.css file:

/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.

----------------------------------------------------------- */

/* BT Content module appears over floating menu bar. z-index is set to value 2 by default. The value z-index:999; does the trick to show the floating menu always on top.*/

#s5_menu_wrap.s5_wrap {   
      z-index:999;
}   

#s5_menu_wrap.s5_wrap_fmfullwidth {
      z-index:999;
}

Hello,

That's a pretty typical value for a menu, usually only items that overlay an entire screen like Multibox would be higher than that. However, sometimes third party developers use very high ones or don't put them in at all.