Z-index and a sticky logo

  • Resolved nathantrickyallen

    (@nathantrickyallen)


    6 years, 8 months ago

    Greetings. Love the plug-in.

    However…

    My page has a custom-logo that I’ve set to “sticky” to be in the top-left corner, and remain there, on desktop computers. On every other page, this logo shows on TOP of the other content (featured image, etc.) as it should.

    But over the page I’m using vidbg (my homepage – https://www.AdultsOnlyMagic.com), the video covers up the logo.

    I’ve tried setting the z-index of the logo to a high number, still no luck.

    What do I need to target to set the z-index of the video to a lower (further back) value, so it doesn’t overlap above the logo?

    Thank you much.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter nathantrickyallen

    (@nathantrickyallen)

    aaaaand never mind. Finally solved it.

    In case anyone else runs into this, I just had to add an “!important” to what I was trying to target:

    .home .entry-hero {
	z-index:0;
}

    did not do the trick, but

    .home .entry-hero {
	z-index:0 !important;
}

    did.

    Not sure if this is the “correct” way to do it – I hear using “!important” too much can sometimes send you down a haphazard rabbit-hole of coding mistakes, but it seems to work for this.

    Plugin Author pushlabs

    (@pushlabs)

    Hi nathantrickyallen,

    I’m glad you solved the issue.

    You are right about !important tags, however, in this case it won’t hurt.

    The reason the first line of code did not work is because there is likely another line of code with more selectors targeting the z-index. As a result, it’s getting priority due to the increased number of selectors.

    No matter, your solution works beautifully.

    Thanks for using Video Background ??

    Blake

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Z-index and a sticky logo’ is closed to new replies.