Home Forums Weaver Xtreme Theme Z-order problem with submenu and sidebar

Topic Resolution: Resolved
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #71234
    jsternfe
    Participant

    On my website, I have left and right sidebars.  The primary navigation menu, 4th choice has a submenu that drops down.  I just got a new 34″ ultrawide monitor, and on it, the submenu appears behind the left sidebar contents.  (On regular aspect ratio monitors, the submenu drops into the primary content area and is in front of it no problem).  I had a similar z-order problem back in 2016, which Scrambler quickly solved with some CSS:

    There has been some z-index changes in v3.
    Add the rule below in Main options > Fonts & Custom > Custom CSS Rule box

    /* fix overlay for google search and right sidebar */
    #primary-widget-area {z-index:999;}

    I assume the fix here will be similar, but I am not sure what to target.  I tried setting primary-widget-area to 0, and nav-primary to 999 but neither worked.  A little help please?

    -Jon

     

     

    #71235
    scrambler
    Moderator

    Cannot do anything without a website link, and I will be traveling the next few days

    #71236
    jsternfe
    Participant
    #71249
    scrambler
    Moderator

    Both the menu and the sidebar have a 999 z index.

    Add

    .menu-primary {z-index:1000;}

    To make the menu above it

     

    #71251
    jsternfe
    Participant

    I figured it would be something like that, but for some reason, this did not work.  Is the drop-down piece of the menu that displays the submenu a different class or target?

    #71252
    scrambler
    Moderator

    You need to add !important to the rule

    .menu-primary {z-index:1000 !important;}

    #71253
    jsternfe
    Participant

    And that fixed it, thank you as always Scrambler! 

    #71255
    Weaver
    Keymaster

    I’m guessing you now have more than one custom css rule with z-index fixes dating back to older versions of Weaver?

    I believe that many of those may no longer be necessary as the most recent versions of Weaver Xtreme have the z-index issues resolved, and most user sites no longer need custom z-index rules. I think think is likely as the issue you had with the menu behind the widget area certainly does not happen now with current css rules.

    #71259
    jsternfe
    Participant

    Hi Weaver!  No, I had the one rule mentioned in my first post and I removed that as part of trying to fix this.  The only other custom rule I have that references z-index is my background image:

    img#bg_image {
    z-index: -9999;
    }

    Which I don’t see any harm to.  I know several of my plugins have CSS files, perhaps one of them is to blame?  If you want me to do any experimentation to help make the Weaver Xtreme theme better, let me know.

    -Jon

    #71261
    scrambler
    Moderator

    @jsternfe, @weaver is right.

    You have the following Custom CSS rules in your site

    /* fix overlay for google search and right sidebar and menu */
    #primary-widget-area {z-index:999;}
    .menu-primary {z-index:999;}

    That is the cause of the problem. If these rules are still needed, there should be a higher value on the menu than on the sidebar.

    If you added a third rule, you may want to delete all three and see if the two are still needed.

    And if the two above are needed, there is no need for a third rule with important, just change the values in the two rules above to make the menu higher

    #71262
    jsternfe
    Participant

    Shucks, the code was in the middle of my custom CSS stuff, totally missed it! I was able to remove those lines and the 1000 fix and it all seems to be working now. Sorry for the trouble. Theme works great as always! My mind, not so much…

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