Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 18
  1. #1
    Join Date
    May 2021
    Posts
    4

    Default Popup layer to appear behind a sticky Nav bar

    Hi Ladies & Gents,

    I am currently designing a web page for a client and I'd like some input/ help.

    The client requested that I add images to the web page to represent different products and when you mouse over an image it will popup with another image over it showing the products description, which I have done. The only issue I'm having is that the nav bar is sticky at the top of the page and when you mouse over an image the popup layer pops up on top of the nav bar instead of behind. Is there any way I can get the popup layer to appear behind the nav bar?

    I have tried putting the product description images in the MouseOver layer as well as made them popup layers but both show in front of the sticky nav bar.

    I have attached a link to the demo page below.
    https://www.swanplastics.co.za/demo/products.htm

    Many Thanks.

  2. #2
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    920

    Default Re: Popup layer to appear behind a sticky Nav bar

    You could force the nav bar (in fact any stick to top element) to front by adding
    Code:
    <style>.xr_stt{z-index: 40 !important;}</style>
    to the head code of the page. But then it would be in front of the logo that scrolls out. You would then have to force the logo to be 'more in front'.
    Give it a name 'htmlclass=zi50' (without the quotes) and add some code to the above:
    Code:
    <style>.xr_stt{z-index: 40 !important;}.zi50{z-index: 50 !important;}</style>

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Info Re: Popup layer to appear behind a sticky Nav bar

    I appreciate siran's code but even I find it hard to fathom out what works with Xara's Sticky & Stick at Top functions.

    My approach is still CSS but it bypasses the complexity by just fading the top image to reveal an under block.
    In doing to, I removed the image that was part of your under presentation as the fade on the top image still shows some detail.
    You can tune what is revealed by changing the percentages of the CSS in Website > HTML Code (head).

    The image on the right probably will not work but I have included it anyhow as it is a no-code approach.
    It uses a link, javascript:;, to avoid a jump to top when clicked.
    This allows the top image to be shown again until you release the click or move off the image area.

    CSS - SuperSwan.xar

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  4. #4
    Join Date
    Apr 2018
    Location
    London
    Posts
    653

    Default Re: Popup layer to appear behind a sticky Nav bar

    I followed Siran's code with a small twist; the telephone number (group) has a higher z-index than "xr_stt" and scrolls out of view to reveal the logo (which is stick-at-top) Stick V-top.xar

    Seems to work OK - assumed all the images were popups in the example.

    Gary

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,756

    Default Re: Popup layer to appear behind a sticky Nav bar

    Hi Kirst & welcome to TalkGraphics.

    An alternative to doing as Siran, Acorn & Gary suggest is to place your images and pop-up layers below the MouseOff layer.

    See the attached xar file.
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Info Re: Popup layer to appear behind a sticky Nav bar

    Quote Originally Posted by Egg Bramhill View Post
    Hi Kirst & welcome to TalkGraphics.
    An alternative to doing as Siran, Acorn & Gary suggest is to place your images and pop-up layers below the MouseOff layer.
    See the attached xar file.
    Egg, if you create MouseOverX & MouseOffX under your MouseOff and add links 'javascript:;' to each pair of images then you do not need a separate layer for each pop-up image:

    Click image for larger version. 

Name:	Screenshot 2021-07-10 124044.jpg 
Views:	21 
Size:	92.5 KB 
ID:	130061
    Ignore the Show pop-up layer entry; it is not needed.

    No code needed. Pure Xara.
    I have include the MouseOver effect of Fade/Normal as Instant I consider to be too jarring.
    I still use mine as I halve the image overhead and retain full control over effects.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  7. #7
    Join Date
    Apr 2018
    Location
    London
    Posts
    653

    Default Re: Popup layer to appear behind a sticky Nav bar

    Not sure I get this answer. The OP has a stick-at-top Navbar, not a Sticky Navbar: https://www.swanplastics.co.za/demo/products.htm. The issue is that as an image slides under the Navbar, if you hover over that image, the underlying image, whether on a MouseOver or popup layer comes in front of the Navbar.

    Click image for larger version. 

Name:	MouseOver in front of NavBar.jpg 
Views:	24 
Size:	102.4 KB 
ID:	130062

    When I make the Navbar stick-at-top Kirst_Rework.xar I get the same error that the OP sees - in the OP example the underlying logo reveals itself and the telephone number scrolls out of view.

    When I make the Navbar sticky (and place it on the top of the page); there is no issue, but the only way I can find with stick-at-top and match the OPs design is here: Stick V-top.xar

    Gary

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Info Re: Popup layer to appear behind a sticky Nav bar

    Quote Originally Posted by Initiostar View Post
    Not sure I get this answer. The OP has a stick-at-top Navbar, not a Sticky Navbar: https://www.swanplastics.co.za/demo/products.htm. The issue is that as an image slides under the Navbar, if you hover over that image, the underlying image, whether on a MouseOver or popup layer comes in front of the Navbar.

    Click image for larger version. 

Name:	MouseOver in front of NavBar.jpg 
Views:	24 
Size:	102.4 KB 
ID:	130062

    When I make the Navbar stick-at-top Kirst_Rework.xar I get the same error that the OP sees - in the OP example the underlying logo reveals itself and the telephone number scrolls out of view.
    When I make the Navbar sticky (and place it on the top of the page); there is no issue, but the only way I can find with stick-at-top and match the OPs design is here: Stick V-top.xar
    Gary
    Gary, good call. I failed to check Egg's offering and didn't spot the lack of SaT.

    However, my CSS can handle text rolling over as well; it was not a case I had considered.
    Simply use: <style> .under { z-index: -100; } </style>
    You use Name htmlclass="under" such objects for anything that might touch the menubar.

    For my original, removing surplus images and adding fuller image manipulation, my CSS becomes:
    <style>
    .reveal { transition: all 660ms ease-in-out; }
    .reveal:hover { filter: opacity(20%) contrast(50%) saturate(50%) blur(3px); }
    .reveal:active { filter: opacity(90%) contrast(130%) saturate(120%) sepia(100%); }

    .under { z-index: -100; }
    </style>

    Images with reveal (unders) only need htmlcass="reveal".
    All other objects touching the menubar need htmlclass="under".
    If you click on a reveal under, you get a re-presentation of the top image (with my adjustments).

    I am wary of adopting siran's code as it is dependent on Xara's whim.
    With mine, you are in full control over what to label and how to play.
    The approach addresses Sticky and SaT options or any variation including Stretch.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  9. #9
    Join Date
    Apr 2018
    Location
    London
    Posts
    653

    Default Re: Popup layer to appear behind a sticky Nav bar

    Acorn,

    I used a subset of your reveal class here: https://initiostar.co.uk/demo/CSS-Reveal/ and all works as expected. Provided the Navbar elements are at the front (and in the correct order and top in the Page & Layer Gallery), I think everything slides under the stick-at-top elements without any additional code.

    For completeness I ran Siran's code in my example here:https://initiostar.co.uk/demo/CSS-StickTop/

    I think the only time the OPs issue would occur is where you have a link (MouseOver or Popup); not sure then that there is an alternative to using SaT z-index

    The reveal approach was a great idea and thanks for sharing.

    Gary

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,041

    Default Re: Popup layer to appear behind a sticky Nav bar

    Quote Originally Posted by Initiostar View Post
    Acorn,
    I used a subset of your reveal class here: https://initiostar.co.uk/demo/CSS-Reveal/ and all works as expected. Provided the Navbar elements are at the front (and in the correct order and top in the Page & Layer Gallery), I think everything slides under the stick-at-top elements without any additional code.
    For completeness I ran Siran's code in my example here:https://initiostar.co.uk/demo/CSS-StickTop/
    I think the only time the OPs issue would occur is where you have a link (MouseOver or Popup); not sure then that there is an alternative to using SaT z-index
    The reveal approach was a great idea and thanks for sharing.
    Gary
    Gary, thank you.
    You hit CR in siran's code in the first demo page & I don't think you labelled any part with ClassName, frontobject.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •