Sticky header vs lightbox modal

  • Resolved benorange

    (@benorange)


    2 years, 7 months ago

    Hi All,

    I am looking for help with setting the z index of my sticky header so I can see all of the lightbox gallery. Thanks in advance for any help.

    I want to change this: snip

    … to this: snip
    …but anywhere on page so user doesn’t have to scroll to the top of the page in order to see the “X” close button.

    I have been trying this CSS:

    .swiper-zoom-container{
	z-index: 2147483647 !important;
}

.inside-navigation.grid-container.grid-parent{
	z-index: 999998 !important;
}

    I am getting the classes from inspecting element, which also shows the sticky header to have z-index of auto.

    I really want to be able to move it behind the lightbox gallery.

    The page is here.
    The lightbox is at the bottom of page.

    Can you see what I am doing wrong or a way to check if the auto z-index for the sticky header is !important?

    Alternatively another way to display an expanded lightbox gallery without the close button hiding behind the sticky header?

    Bw,
    Ben

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • ying

    (@yingscarlett)

    Hi there,

    I don’t see a solution for this problem.

    You can’t use z-index to define the stack order of elements that have different parents.

    The header‘s parent is body, the lightbox gallery’s parent is a <div> with class elementor-5422.

    Thread Starter benorange

    (@benorange)

    Thanks @yingscarlett,

    Oh.. disappointing.. I get what you mean though.

    Is there maybe a way do simply move the modal down a bit so it isn’t behind header?
    -not a problem if the bottom goes off the bottom of the page..
    -like position: relative and top: +’ve #px

    Or is there maybe a php route to disable header when lightbox modal is active?
    -I know that php is not really a theme question but grateful for general advice if this idea is valid.

    Bw,
    Ben

    ying

    (@yingscarlett)

    A custom PHP or JavaScript solution will require custom development, unfortunately we can’t really help with this.

    Thanks for your understanding!

    Thread Starter benorange

    (@benorange)

    Hi @yingscarlett,

    Yes, I expected so, that question was just asking about feasibility. What about the other question. Is there no way to use css to move modal down page or contain it somehow?

    Thanks,
    Ben

    ying

    (@yingscarlett)

    Is there no way to use css to move modal down page or contain it somehow?

    Not sure what you mean.

    Just to make sure you are talking about this part?
    https://www.screencast.com/t/AWUSLAFg

    If so, it won’t be block by header on desktop.

    I assume you are talking about mobile? But on mobile the images goes into 1 column, it becomes a very long section, they will be blocked somehow at some point.

    So I can’t understand what you mean bymove modal down page. Can you explain some more?

    Thread Starter benorange

    (@benorange)

    This is what you get when you click on a gallery item at bottom of page:SNIP

    -You cannot see the “X” to close lightbox and return to page (users likely don’t understand they can also click on black space to cancel, close option is necessary)

    I want it to look like this: SNIP 2

    -Here you can see the close option but this is only possible if user realizes and scrolls back to the top of the page, retracting the sticky header.

    Hi @benorange,

    Try adding this CSS in Appearance > Customize > Additional CSS:

    .dialog-close-button.dialog-lightbox-close-button {
    top: 40px;
}

    Kindly modify 40px to your preferred value.

    Hope this helps! Please let us know how it goes. ??

    Thread Starter benorange

    (@benorange)

    Hi @fernandoazarcon2,

    That worked a treat! Thank you very much. Didn’t need to move it all, just the ‘X’!

    Bw,
    Ben

    You’re welcome @benorange! Glad that worked! ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sticky header vs lightbox modal’ is closed to new replies.

Tags