Sticky Menu + Ditty News Element (Header) falls down over content

Thanks for reaching out. This is happening due to the height of the Ditty increasing after page load, after after the sticky menu has calculated the height of it’s contents.

You can try setting the Height speed of your ticker display to 0. This would ensure the ticker is displayed at it’s actual height as soon as possible.

If this doesn’t resolve the issue, you can use custom css to force the Ditty html element to be a specific height and this will resolve your issue. Anywhere you can add custom css add the following:

.ditty[data-id="2110"] {
    height: 34px;
}

If you add a custom class or id to your Ditty, you could also use that to target it:

.my-custom-ditty-class {
    height: 34px;
}

Let me know how that works out for you.

Hello,

thank you very much for the quick reply and solution, sorry for the wait, we didn’t have time to reply sooner. We tried this first with “Height speed of your ticker display to 0” but unfortunately it didn’t help, so after that, we entered this first CSS code that you sent us, and that solved the problem and we got what we wanted, thank you very much.

#We just have a couple of questions:

• Here in the CSS code, you gave us a solution for the element to be separated in px (pixels)? Will it be responsive for all devices and screen sizes, as we would like it to be? The more precise question is, will that Sticky Header be seen now 100% everywhere displayed on devices and screen sizes, and not make problems like we had before with it, cuz its in px?
• When we added this CSS code, now we have a new problem at the top on the Header for this Ditty element. More precisely, there is no more animation in the Ditty element when loading the page, and there is a white line first, and then only this black background appears with text, it looks a bit strange. We didn’t touch anything, we don’t know why this has changed now, can we somehow restore the animation of the Ditty element as it was before, but also make the header work like this at 100% displayed?

Best Regards,
Lazar

Lazar – I’m glad that helped! In regards to your other questions:

1. The css in pixels should be fine since your are only setting the height. The width of the ticker will still be responsive, and the text you are displaying doesn’t seem to wrap even at small screen sizes. You could modify the css to use min-height instead of height, which would allow for wrapped text, but the first item would need to only be 1 line of text or else you’d run into the same issue you had initially.
2. The background color you have added is being set on the individual items, so the bacground color doesn’t show up until the first item has transitioned in. You can add the background color directly to the Ditty by adding background: rgb(34, 34, 34); to your custom css, or you can set a background color in the Ticker’s Style settings, in the Content Styles section. This should get rid of the flash of white you are seeing now.

Hello,

thank you very much for your help and explanation, we will try this later and probably find a solution.

All the best in your future work and career.

Best Regards,
Lazar

Sounds good. I’m going to mark this ticket as resolved, but feel free to create a new one in the future if you need to.