WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] dropdown menu issues header (8 posts)

  1. xxsodapopxx5
    Member
    Posted 5 years ago #

    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?

  2. stvwlf
    Member
    Posted 5 years ago #

    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.

  3. xxsodapopxx5
    Member
    Posted 5 years ago #

    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.

  4. figaro
    Member
    Posted 5 years ago #

    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

  5. stvwlf
    Member
    Posted 5 years ago #

    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!

  6. stvwlf
    Member
    Posted 5 years ago #

    ooops - typo

    it should say

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

    #tabs: width 150%;

  7. digitalnature
    Member
    Posted 5 years ago #

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

  8. xxsodapopxx5
    Member
    Posted 5 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags