I have two sites with very similar themes based on Atomik. On one the “Enable transparent functionality” setting works just fine. On the other, it does not work. The nav is sticky but no transparency. Any ideas for a fix? The block editor says “Enable… if the theme supports it.” what is required for support in the theme?
Version: 9.3.7
Php: 8.2.18
Additional notes. I have another instance of the same site on a staging server where the transparency feature works fine. So I must have broken something. Check it out:
Works (staging):
Austin Quakers
Fails (testing):
Austin Quakers
I tried swapping out various components from the staging to the testing site:
Compared setting on top nav and hero blocks and found them identical between the two environments.
Any ideas?
Total guess here but you have some top padding set to 74px on a DIV on the broken site that’s not on the site that works.
<div class="theme-atomik ccm-page ccm-page-id-1 page-template-full" style="padding-top: 74px;">
If I add 74px of padding (in Dev console) to that same DIV on site that works, it breaks.
Thanks mhawke, this is a good clue. I have observed, on the testing site, that this padding is added dynamically in the “signed out” state, and removed when the user is signed in.
<div class="theme-atomik ccm-page ccm-page-id-1 page-template-full"
style="padding-top: 74px;">
This is not the case on the staging site (the one that works). Rather, the cmm page 1 div is not changed, but the "transparency-enabled’ class is added to the navavigation bar div. This, of course applies the transparency.
<div class="ccm-block-top-navigation-bar
transparency-enabled"
style="" data-transparency="navbar">
Oddly, when I apply the transparency class using the Dev console, it breaks the “stickyness”, but setting that aside for now.
The style sheets are identical and so is the environment report from the dashboard. So clearly, some source code has changed. I’ll go on digging.
You may find my Environment Diff addon useful for picking out the fine differences between your live and stage sites.
Determined that the ‘transparency-enabled’ class is applied by /concrete/js/features/navigation/frontend.js. This file is identical in both environments. I’m still scratching my head.
is not found in the code base so it’s being added ‘manually’ somehow. Could it be that you have added some padding to the top with Design & Custom Template feature where you can add padding and margins to an area/block/container?
I don’t think so. The top nav and hero image blocks don’t have any added padding. I’m not sure where one would add design settings to the page div. Also, this doesn’t explain the failure to apply the transparency-enabled class, which I believe is done in the javascript mentioned in the previous. I’m pretty convinced the padding is calculated and added dynamically.
The transparency gets ‘cancelled’ when the page scrolls down a certain amount so is it possible the 74px padding effectively scrolls the page and then the transparency disappears? I grabbing at straws here. There are lots of wild places where scripts or css can be inserted such as in the ‘Tracking codes’ area or customizing the theme through the Dashboard so I’d wander around and see if anything was added, perhaps as an experiment, that never got deleted.
That’s a really interesting idea. I’ll keep drilling down and hope not to get lost in the “wild places” 
Guess what? I now have a 74px of padding messing with my Atomik nav menu too. I mucked with my theme a lot so it was hard for me to diagnose things but when I fired up another un-molested Atomik, it showed up. Try deleting the Hero block from the top of the page and adding it back in fresh (not from the clipboard) and see what happens.
BUT you have to make changes while logged in with one browser (eg Chrome) and then check the results from another browser where you’re not logged in (eg Edge) because Atomik doesn’t show transparency on the header nav while logged in.
OK, more info. I solved ALL my problems with transparency but removing a tiny bit of top padding (3px) I had put on the ‘Page header’ Area using the ‘Edit Area Design’ by clicking on the ‘Page header’ tab. Hope this video helps
My goodness Michael, I hope I haven’t infected you with this! I have been out doing other things, but I’ll take a look in the morning and let you know how it goes.
I never worked out whether that was by design or whether it was a ‘feature’.
Fixed! However, my fix was different from Michael’s. I deleted and replaced the Hero Image. That did the trick. But on closer examination, I found that the real culprit was that I had used ‘Design and Custom Template’ to place a custom ID on the block and applied a CSS rule to change the position of the title by adding some bottom padding there.
#fma-front-page-title h1 {
padding-bottom: 6rem;
}
Might have worked if I used positioning instead of padding to change the H1 location.
Another curiosity: The top nav uses a custom template. Before I replaced the Hero Image, I experimented by switching the template back to ‘default’. This had the unexpected effect cancelling the “stickiness” of the nav bar.
So, what have we learned from this exercise? Only that this transparency feature is very fragile. Jiggle something on the page and it is likely to break. Fortunately, at least in my case, once the page design is done and deployed, there is little chance we will be fooling with it.
Abundant thanks to Michael (mhawke) for staying in there with me.
Oh, I knew this was ‘fragile’ a long time ago. As I mentioned, there are so many ways to inject stuff into pages that ‘wandering around’ is a basic developer’s skill for these sites. Wonderfully adaptable but if you forget what you did and want to reverse something??? Then it becomes a exercise in ‘Where’s Waldo’. Glad you got it fixed and thanks for the question so I could dig into my own site(s) and fix them too.
@JohntheFish It’s a bug. Actually an ‘unintended consequence’ of pushing the content down when logged in. Anything that moves that top ‘Page header’ area down even a pixel messes it up. At least that’s my conclusion.