Tested on the frontend using both Firefox and Chrome. Sticky function works even in the frontend editor. Default state is "No" as expected.

The only issue is that the switcher for the "Sticky" setting isnt correct for the "no" state. It should be disabled (grey) not enabled (green).

@jwaisner
Switcher should now be Ok.

@C-Lodder
Moved the new css to _layout.scss

npm needed.

Folks, if #27566 is tested and merged, this PR will be modified.

I have tested this item ✅ successfully on 37bdd98

I have tested this item ✅ successfully on 37bdd98

@C-Lodder
tested here after patching with #27566
I tested applying sticky-header to <header after modiying the css by taking off margin: 0 0 20px 0 !important; as margins are now OK in .container-header header
In this case, it does not work with Chrome or Opera.
WE definitely need to apply the new class to div class="grid-child container-header full-width <?php echo $stickyHeader; ?>">
Will modify this PR as soon as #27566 is merged.

You do not need to have the webkit line in the scss. The build script deals with that automatically as shown in the screenshots below.

But why are we even adding any css at all. This is a bootstrap template and bootstrap has its own utility class for this already called position-sticky

scss

css

You do not need to have the webkit line in the scss. The build script deals with that automatically as shown in the screenshots below.

OK. It would work indeed, but no use. I will delete that scss. See below.

But why are we even adding any css at all. This is a bootstrap template and bootstrap has its own utility class for this already called position-sticky

I had tested that. position-sticky is missing an essential part: top: 0;
Without it, it does not work.

But after also adding sticky-top in order to have the following code
$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';

it works fine in all browsers tested.
Modifying this now as using layout scss is useless.

I have tested this item ✅ successfully on f5c1f72

I have tested this item ✅ successfully on f5c1f72

@jwaisner
Please test again.

Do you want to add this parameter to joomla.sql?

(0, 'cassiopeia', 'template', 'cassiopeia', '', 0, 1, 1, 0, '', '{"logoFile":"","fluidContainer":"0","sidebarLeftWidth":"3","sidebarRightWidth":"3"}', 0, NULL, 0, 0),

I haven't tested this but would this not also stick the banner position? Maybe an issue on small devices if anything large in there.

yes and the search postion

I have tested this item ✅ successfully on 9b669f6

I have tested this item ✅ successfully on 9b669f6

Do you want to add this parameter to joomla.sql?

Not sure it is absolutely necessary as the absence of the parameter = No

I haven't tested this but would this not also stick the banner position?

Yep, it does. That's why we have a parameter to choose sticky or not, default being No which I would recommend in case of large banner usage..
Using a banner image wider than the mobile window size shrinks the image width (not proportionnaly) and is not recommended anyway.
Basically, as for most aspects, it depends on the site owner decisions.

yes and the search postion

Nope. Search is in the toggler as well as the menu position.

RTC.

It is now the decision of maintainers to get this feature in or not.

That's why we have a parameter to choose sticky or not, default being No which I would recommend in case of large banner usage..

A fair point but personally I would just stick the navigation/logo. Also may be worth wrapping it in a media query so it only applies to desktops.

A fair point but personally I would just stick the navigation/logo.

The only way I found was to separate totally the banner from the container-header <div>

Also may be worth wrapping it in a media query so it only applies to desktops.

We indeed could do that.
We would have to override bootstrap. In which scss would you do that?

In any case, if the banner is huge, we would have the same issue in mobile view. Is it worth?

Try this applied to the .container-header class..

@include media-breakpoint-up(sm) {
  position: relative !important;
}

Try this applied to the .container-header class..

Would rather be down instead of up, i.e.

@include media-breakpoint-down(sm) {
  position: relative !important;
}

and indeed, for smaller screens, the header would not stick.

@wilsonge @HLeithner
I still think personally that anyone wanting the header to be sticky is not going to add an enormous banner and that keeping the header sticky is also quite useful in mobile mode.
What do you think?

Personally I find sticky headers on mobiles annoying as it reduces the screen size available for the text. So I'd kinda be ok with it tablet and up ?‍♂ but it's just a personal opinion - nothing more

Personally I find sticky headers on mobiles annoying as it reduces the screen size available for the text. So I'd kinda be ok with it tablet and up ?‍♂ but it's just a personal opinion - nothing more

OK, will do in order to get rid of that and concentrate on other matters

Now unstuck in mobile view.
@ChristineWk @jwaisner @ciar4n
Please test again.

Needs npm

Removed RTC because a new round of testing is requested from the author of the PR

I have tested this item ✅ successfully on d6ae643

It works as described but I really don't like just adding more and more parameters

I have tested this item ✅ successfully on d6ae643

RTC