Relative Styles for submenus?

I want to change its background due to scroll position, therefor I need to address that via a relative styling. How to do that?

Hi @FZwo,

You should be able to achieve this with this rule:

Please let me know if this helps!

Trying, but not working yet. The menu is wrapped in a reusable block, and my settings are:


I attached the relative style directly to the menu

Be sure to attach the relative styling to your top level container.

changed that to top level container (section of the template part header), did not help yet

As I want to change background of the dropdown menu only when being at top of page, shouldn’t the selector be .cc-scrolld-top instead of .cc-scrolld-down as in your rule settings? I did so for the whole header in setting it to transparent when on top.

It is a bit tricky, but I am getting closer to it:

  1. Scroll selector dependent styles has to be defined at the top level container (of the header)
  2. corresponding styles at a wrapped menu item are overriding this, so one has to delete them at the inner level
  3. If a style is e.g. dependent from the selector “cc-scrolld-top”, and it should change when not at top, one has to add another relative style to cover the “…if header is not at top of page” - how exactly I am working on

Is this now the right approach?

But may be that approach is not possible, I am struggling with 2 different styling levels dependent on the scroll position, thus they are possibly interfering each other. The first level is the header as a whole, to be transparent at the top of page (formally done and works fine with the relative styles added to the top container (header)). The second level is the submenu background, which also is to be different at top and not top position, and its respective relative stylings (as @Araminta already lined out) has to be added to the top container too. I think the whole thing messes up that way :grin:

Glad to hear you’re getting closer, @FZwo!

As this is a rather technical problem, could you possibly share a link of what you would like to achieve?
This way I may be better able to help you.

Thank you.

Sent a login to that page, not sure that is what you meant, but to repeat here what my intention is:
The header at front page is changed when at top because of the hero background. The header of all other pages not (template parts are named accordingly). What I want now to add at the front page header is: Submenu background and typo color should be different too when at top (for the same reason, the hero background). E.g. white background with dark typo at top, and when not at top the normal black background with white typo).

I have been trying to achieve that (in addition to the header as a whole, which already works properly with the rules I added), but either way it did not work

You can use :not(.cc-scrolld-top) selector, I do like this:

header[data-cc-scroll-action]:not(.cc-scrolld-top) {
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.1);
}
header[data-cc-scroll-action]:not(.cc-scrolld-top) nav > ul > li > a {
  color: var(--c-body);
}

Thank you for the clarification, @FZwo.

I have recorded a short video which should help you achieve this.

Be sure to let me know if you require any further help in setting this up on your end!

1 Like

@Araminta @Marius Finally I got there, it takes me a mixture of all your worthy hints. To achieve what I needed, I had to create 6 relative styling, and hold them all in one place (at the top container). Araminta lined out. that one have to add the pre-defined classes as “cc-scrolld-top” additionally to the section, but that is not needed:

These are the different rule settings:




I did not use the overall submenu dropdown background for altering, as this produces unfashionable thin border lines when hovering the different submenu items (maybe this is something to be reworked by Cwicly)

Anyone can follow that effect now on my live site (link under show & tell), that makes it a bit clearer why this was so cumbersome

Update on

to add the pre-defined classes as “cc-scrolld-top” additionally to the section, but that is not needed

not fully true as I recognized, as adding this makes the page start with that condition which might be (as in my case) be necessary due to a transition duration set for the scroll action

Can you show me what should be set in the Effects tab for the scrolling effect?

image

Ok, I guess what I need for the scroll effects is here: Scrolling - Documentation
:slight_smile:

1 Like

Yes, that’s where I got my settings from