Support » Themes and Templates » dropdown menu issues header

  • Resolved xxsodapopxx5

    (@xxsodapopxx5)


    Hi I am working on a site and I am having some issues with the dropdown menu-ing system. I have multiple lines of ‘pages’ and in each they have dropdowns.
    you can check it out for yourself here.

    teachersandstudentsblog.com

    as you can see the top line of ‘pages’ dropdown goes underneath the second line of ‘pages’

    is there anyway to fix this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi

    There are usually fixes for this but they are not always simple to implement. This is a concept call stacking order, which has a CSS tag z-index. Like layers in Photoshop, where you have multiple objects residing in the same space and you have to indicate which one gets displayed on top of the others.

    That part is simple to grasp. The complication is in CSS the layers being addressed have to be part of the same positioning context, meaning there must be an ancestor element to both elements that has position: relative set on it.

    I see you already have some z-index settings in your CSS. What needs to happen is #tabs ul li li must have a higher z-index than #tabs ul li Right now #tabs ul li has a z-index of 1000, and by inheritance, so does #ul li li

    I tried increasing the z-index of ul li li in Firebug but that did not
    resolve it. Most likely there are positioning issues that need to be addressed. I suggest you disable the javascript effects until the stacking order is worked out – the fewer things you have going, the simpler to locate the problem source. Google for articles on z-index and position: relative – that will help you understand the concept.

    I find this is one of the most confusing areas in CSS.

    Thank you for your help, for the past 2 hours i have been debugging and I still cannot seem to solve this issues, even with no javascript(which i turned off) It doesn’t seem to want to show up overtop the lower row, I am thinking about changing themes… I don’t even know. I’m gonna give it a rest for today and continue to try and fix that problem tomorrow.

    If you want to change themes, then try the iNove theme…the dropdowns work well and if you want to customize the graphics, see the following videos.

    http://educhalk.org/blog/?tag=inove

    Hi

    The main reason you are having these problems is because of the two rows of nav buttons – the theme was not designed for that.

    I like your theme. Consider dropping the sidebar down 200 px, and expand the nav all the way across the horiz portion. if you get the nav buttons on one row the dropdowns will work fine. I just did it in Firebug by setting the width of #tabs to 150px and adding top margin to the #sidebar div of around 200px

    good luck!

    ooops – typo

    it should say

    I just did it in Firebug by setting the width of #tabs to 150 PER CENT

    #tabs: width 150%;

    this was fixed in the last update. it was a z-index issue. get 2.7b from the project page until 2.7 is released.

    I didn’t think that many people use two tab rows 🙂

    oh wow, thanks a ton guys, you’r all awesome and so is your theme digitalnature!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘dropdown menu issues header’ is closed to new replies.