Dropdown Menus and submenu positioning with z-index

Home Forums Older releases 1.0.x Dropdown Menus and submenu positioning with z-index

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2979
    cpb79
    Participant

    Hi, I’m looking for suggestions and help for an issue I’m having with z-index positioning of dropdown menus in my web application using bootstrap. I’m adding a link to an image below to try and explain what’s going on.

    Smartmenu Directory Menu

    Basically I have a header and footer labelled in red and both are in a fixed position to the top and bottom of the browser respectively. I then have my smartmenu labelled Directory Menu Bar placed below the header which works and functions perfectly. The z-index is higher than the header and footer so that it appears above them. However, my header also uses dropdown menus as can be seen on the right hand side and as a result this dropdown now appears below the SmartMenu Directory Bar. I now have a problem as reducing the z-index will place the SmartMenu below the header and footer and unable to navigate it properly as the scroll arrows won’t be seen.

    The only solution I can think of is leaving it as is but having the SmartMenu so that it doesn’t go all the way to the top and bottom of the browser but rather to the bottom of the header and top of the footer. Is there a way of altering the position and placement of the SmartMeun dropdown submenus?

    Any help or suggestions on this are much appreciated. Thanks in advance.

    #2982
    admin
    Keymaster

    The only solution I can think of is leaving it as is but having the SmartMenu so that it doesn’t go all the way to the top and bottom of the browser but rather to the bottom of the header and top of the footer. Is there a way of altering the position and placement of the SmartMeun dropdown submenus?

    Nope, this is not possible because the sub menus are real nested UL elements and we cannot use CSS clip for the long sub menus scrolling feature – just the whole browser viewport can be used as a clipping container.

    But, actually, I believe, it shouldn’t be too difficult to fix the issue. It would really help very much if you could share a code sample but, on theory, I believe this should work – try not setting specific z-index for your Header, Directory Menu Bar and Footer containers but instead set a z-index just to your header and directory menu UL elements. Also if your directory menu UL element is producing the white bar below your header and this causes an issue, then instead you could float it to the left and wrap in it some other full width container that would represent the white bar.

    If you can’t cope on your own, please post some kind of live demo and I will try to tweak it.

    Cheers!

    #2983
    cpb79
    Participant

    Thank you very much admin. I’ve tried this solution and it worked first time, been melting my brain with this for 3 or 4 days and such a simple solution 🙂

    Kind Regards, Ciaran

    #2985
    admin
    Keymaster

    Np, cheer! 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?