CSS : z-index causes float over navbar

  • Resolved eLeXeM

    (@elexem)


    5 years, 6 months ago

    Ciao, Daniele;
    I have a small CSS-related issue I can’t seem to overcome on my own:

    On the example page given, https://liberal.is/netikette, you can see that glossary links (I have given them a yellow background ftm to make them easy to identify) will eventually float above the navbar when scrolling down. While this is OK for the actual tooltip, it’s not so much for the link carrying the tooltip; the latter should not be z-indexing higher than surrounding content, imo.

    From what I can see, this appears to be owed to the fact that the span carrying the class .glossary-link is nested inside the span carrying the class .glossary-tooltip. While .glossary-link has no instruction on z-index, .glossary-tooltip does (as it must, of course, (‘z-index: 999;’ in your original .css, as far as I can see) to overlay above the surrounding content when triggered). However; the nesting makes for the rather unfortunate behaviour described.

    Is this something you think can be remedied in your css?
    (Or would you recommend rather tackling this by just upping the z-index of the navbar to something higher than your .glossary.tooltip?)

    Thank you for your kind consideration, as alwyays
    + best regards,

    lxm

    • This topic was modified 5 years, 6 months ago by eLeXeM.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • This is something that we cannot do in our css because we support the majority of themes around with the actual CSS.
    The best way is to add in your customizer inside WordPress this css:

    
.glossary-tooltip {z-index:auto !important}

    That will fix your problem ??

    Thread Starter eLeXeM

    (@elexem)

    thanks for getting back to me re this.
    sadly, your suggested solution causes the explanation bubble to not be shown above the other content as well :/

    However, setting
    .glossary-tooltip {z-index:2 !important;}
    in combination with settting
    #main-nav higher than 2
    did the trick then, bey the looks of it now.
    ??
    so, cheers – lx & team

    THanks for the solution but usual this problem is something that can be fixed only with looking with the theme and CSS.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS : z-index causes float over navbar’ is closed to new replies.