Hi,
1. Our “Header banner” option (https://prnt.sc/FTE2x6sS_jJ6) doesn’t have “sticky” option and unfortunately making it “sticky” via custom CSS also isn’t possible because such functionality is not built into it during development, main reason of this that Header Builder already has three rows each of them has own option that can make it sticky (https://prnt.sc/cdIfhZ6LmVY2).
Even if ignoring this circumstance, simply applying position: sticky; wouldn’t do the desired results because of the theme HTML structure.
.header-banner {
position: sticky;
top: 0;
}
And using position: fixed; like this:
.header-banner {
position: fixed;
top: 0;
}
Won’t work either because it will collide with other fixed elements and options that calculate their own position from the top of the screen like side sticky navigation, off-canvas sidebars, sticky header, sticky column, and others. Fixing all these conflicts between sticky elements and options requires a lot of custom code that unfortunately can’t be covered by our theme support and can’t be maintained in future updates.
In this case, the only way to create a sticky Marquee element at the top of the site is to place an HTML-block with a Marquee element in the Header builder top bar row and enable a sticky row option for that particular header row. But this method of setting may require different manipulations with HTML-block content, sticky header settings, top bar row layout and to provide valid step-by-step instructions on how to set it up we need to know your site layout type, page builder plugin, marquee element content and setting, sticky header setting, and top bar row settings, etc. This is the reason why we requested your site link and admin access since the easiest way to know all listed above is to see your site configuration in person and provide valid instructions.
2. Our Marquee element animation is done via pure CSS animations. This allowed us to make it without the use of JS, with a small amount of CSS code, minimal impact on site performance, and relatively easy to modify with a single custom CSS, but the main downgrade of this approach that is you cannot set a strict “speed” value since initial speed of scrolling is depending on from individual marquee content and in this case you can set only time of one animation cycle.
In this situation, initial scrolling speed depends on the combined value of the amount of content and screen width. Currently, we already plan (in the 7.4 theme update) to add a responsive setting to the “Scrolling speed” option with the ability to set speed separately for Desktop, Tablet, and Mobile which will allow adjusting scrolling speed for each individual Marquee element depending on its content. But in your first reply you also requested a temporary code snippet to change following scrolling speed, and to prepare such a snippet we need to inspect your issue with Marquee element, knowing where element was added and which page builder is used since both WPBakery and Elementor builder has different media query breakpoints and generate its CSS code differently. This is the reason why we requested your site link and admin access since the easiest way to know all listed above is to see your site configuration in person and provide a valid code snippet with instructions on how to apply it.
3. Our Marquee element has a “Pause on hover” option (Elementor https://prnt.sc/W1irjbNPhq4J, WPBakery https://prnt.sc/mU_EgCXFD8Ac). If this option is enabled, your scrolling content will stop if the mouse cursor is placed on it. On desktop devices, it’s working as it’s shown in the following video (https://gyazo.com/317a2257fcabc4ca9053fe7468be003b), but since mobile devices don’t have a mouse cursor – “hover state” is working differently on mobile browsers with touch screens devices. By default, on mobile devices “hover state” is activated by a single tap on the screen, working similarly to “focus state” on Desktop, since “Pause on hover” will be working on mobile devices with a single tap on marquee content and to “unhover” you need to tap in anywhere else other than the marquee content. Here is a video of how it works on a mobile emulator with the visible cursor (https://gyazo.com/25cdb0c7b523513fa607d940c90f5963) and how it’s working on real mobile device (https://monosnap.com/file/1wvlxWS6UVWscPwEtl7aaCplz9vb6h).
So if you are facing the following behavior with the Marquee element related to “Pause on hover” you have different options to sort it out:
A. Disable “Pause on hover” to prevent scrolling from stopping after the interaction.
B. If your content stops after tapping on it, tap on any other place to renew the scrolling animation.
C. Fill Marquee content items with real links, so the user can go to another page, ignoring the subsequent animation state.
Kind Regards
.
