Hi
I’m trying to get a button inside a Pin Stack to appear on top of the nav bar in Nick Cates Forward theme, I’ve tried setting the z index to increasingly high values.
Sample page is here as you scroll down the page the button goes behind the nav bar and then re-appears.
Appreciate any pointers on the best way to resolve this.
Many thanks
Mark
I don’t think Pin is the best solution here given the structure of the page. Given that you want the button to stay in the same place any way, I would suggest that you use Target and just position it relative to the browser window.
Thanks Andrew, appreciate the response.
I’ve changed Pin for Target, set relative to browser, and have the same issue in that the stack is behind the navbar, where I’d like it in front, I’ve published to the same link as before. Z index on target is set higher than that of the navbar.
Interestingly when I change the setting to be relative to body, the stack does show above the navbar, but obviously disappears when the page scrolls.
Ideally I want to have the button starting on, or just above the navbar, always visible and in view when the page scrolls. I guess my work around is to have the starting position just below the navbar, but I’m keen to understand how to resolve.
Thanks again
Regards
Mark
The problem that you have is that all the content that you add is placed within a wrapper with a z-index defined. Adding a z-index to anything inside this will only be relative to that of the wrapper - hence why things are going under the bar which is outside of this.
The only way around this would be to override the z-index on the container and set it to auto but I really could not recommend that you do this - the theme has this CSS for a reason and changing it could bring unpredictable results.
Thanks for the explanation Andrew, I now understand why the changing the z-index wasn’t having any visible effect.
I’ve gone with having it starting to display just below the nav bar.
Thanks again
Regards
Mark