Implement sibling fade

Support
#1

Hey there,
I found this css https://css.30secondsofcode.org/snippet/sibling-fade
and I’d like to implement it in my navigation. I tried this css in my header

span{
 transition: opacity 0.2s;
}
.x-anchor, .x-anchor-menu-item:hover span:not(:hover) {
 opacity: 0.5;
}

but I could not make it work sadly. Wondering if you could give me a suggestion, since it seems easy but I dont’t know the right class to use in the protheme.

thanks for your help!

#2

Hi @zerotoone.de,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. Since you’ve already given a class sibling-fade to your menu, you can add the following code in the Theme Options > CSS:

span.x-anchor-text-primary {
    transition: opacity 0.2s;
}
.sibling-fade:hover span.x-anchor-text-primary:not(:hover) {
    opacity: 0.5;
}

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps!

#3

Thank you. works great.
Now I got a general problem with the navigation element in the theme. The area that triggers a clickable link or makes the hovered text change states is very small by default. I’d like the area around the text to be clickable too and it should trigger the color change and cursor behavior. this screenshot explains it

#4

Hey @zerotoone.de,

The area surrounding the text is clickable as you can see in the screenshots below.

Regarding the effect, you will need to target the main Navigation Inline element for that. Please remove the previous code and follow the tutorial below.

Opacity is also not the correct method for that effect that you need. You should use font colors instead and rgba color value to achieve text opacity.

.x-menu:hover .x-anchor .x-anchor-text-primary {
    color: rgba(0,0,0,0.5) !important;
}

.x-menu .x-anchor:hover .x-anchor-text-primary {
    color: black !important;
}

As you’ve noticed, x-menu is the parent element in the Navigation Inline structure. Therefore, you could target that with $el if you’re going to use the Element CSS.

Since this is a customization, this is as far as we can help. If you need changes or need more customization, please consult with a third-party developer.

Hope that helps and thank you for understanding.

#5

thank you! you are great help! :slight_smile:

#6

You’re welcome, @zerotoone.de.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.