Smart Visibility & Sticky Menu, Limelight Menu

When playing recently with limelight following the ‘hotel’ example, I stumbled across a few observations I would like to report. Sorry, it is a mix of topics, but all related to @tav great BWD stacks. You can find the test site here: https://ll-test.gerdklose.com

  1. I used a SP stack with ‘smart visibility’ together with a sticky ‘Chroma Pro’ Menu in order to be able to scroll a header away after having seen it. This combination seems finicky, when scrolling very slowly it works, but when scrolling faster the scroll position isn’t adjusted and the part below the Menu exhibits a scroll jump. It might be because both the ‘smart visibility’ and the sticky Menu need to adjust some padding or position, when the Menu reaches the top page. Maybe there is a combination of settings to make it work more robust ? The behavior can be tested e.g. on the “Launcher” Page after reloading.

  2. I initially used the limelight bar to launch the test pages as iFrame content with limelight, but the ‘close all’ button showed different appearance and hover behavior, depending whether it’s position was at ‘start’ or ‘end’ (sorry, this is no longer part of the example)

  3. Hence I built a simple test Menu out of Button Plus stacks to launch the pages using limelight (and lazy loading). Using ‘PopDrop Content’ and more Button Plus even allowed me to have a submenu (this likely will work with any menu that allows to e.g. assign a custom class). I then used a css snippet @tav had provided somewhere else to distinguish active buttons.

.b-p.lightbox-Open{
Background-color:red!important;
Color:red!important;
}

However, an active button only shows the red text, but no background color change (don’t mind the odd color choice, if it should work ;) ) Interesting side note: by assigning the Button “Pages” with both custom classes (page3 and page4), the active color is even visible there. Any idea, why the background color isn’t changing ?

Thanks for the help - like many said before, this is a great place to learn. What a privilege to have you experts as teachers.

I cannot see this happening. I’ve looked in all three browsers but they all seem to work OK for me which to be honest actually surprised me. Removing content above a sticky menu is notoriously problematic but Sections, Impact and Chroma were all designed to work together so it should work.

I am quite happy to have a detailed look at this though if it is problematic in your project or I am missing something in your published example.

Yes, this is a known issue. It is because of the way that the button has to be moved and cloned using code. It is not ideal but without a lot of extra stacks logic statements (which will slow things down) it is compromised. I took the view that given that it is a very rarely used feature that it was better to have more speed for the majority of users.

Looks like your CSS has an English spelling of background-colour instead of the American one that browsers understand.

I applaud you for spelling it correctly but unfortunately the browsers do not see it the same way :) If you change it to background-color then it works fine. You may well have copied and pasted that from something that I typed where my computer auto-corrected it to proper English.

Here is what you have (you will see that it is crossed out due to the spelling):
CloudApp

1 Like

Thank you so much for your prompt reply. Quick comments to the topics you solved right away: i can live/ workaround with the ‘limelight bar’ limitations, glad to hear it is a known issue. Hard to believe, that I was sitting in front of the css code and didn’t realize the two ‘color/ colour’ usage myself - works like a charm, when adopting the US-spelling … with e.g. yellow instead of red, lol. Most likely my typo when entering it - great moment to learn for novices ;)

Finally to the scroll-behavior: I have an old 2009 MacBook Pro and noticed it on Safari (latest version), but could replicate it also on the iPad with Safari and Chrome. On the iPad it seemed to work better when scrolling quickly, kind of opposite to the laptop experience - nonetheless, I can easily have it behave both ways. To illustrate what I mean, I took a short screen recording - two snapshots are shown below, and I sent the video to your support address. The first image shows the proper behavior, the second illustrates the ‘jump’ after the Menu locks.

image image

Thank you for looking into the topic - do you need my project file to check my settings - I could send a zipped archive to your support, too ?

Thanks again