I have looked at several feeds on this topic, but haven’t found something that works. Basically, what I believe is happening, is that I have two areas of elements whose styling is being overwritten by another element.
On the page “Area Guide Copy 2 - long area names test” there is a sticky nav that appears after the hero section in preview. The links in that section appear a default blue link color when scrolling over the corresponding section. I’d like them to appear another color (our brand primary blue) and have attempted to set that hover color both on the link element (class name “sticky nav section”), and the default styling of a text link and link block to no avail.
And the second item that is not behaving as I’d like is the smaller nav arrows under the sections “For Your Wedding Guests”. I’d like them to appear the same brand primary blue on hover of their containing div, just as the headers do (ie, "Welcome Bags, etc). I’ve set the hover color to our primary blue in both the div that contains the headers & arrows and on the arrow itself. The reason the arrow is not in the same text block as the header is that it is a different font. Any ideas on what I’m missing or a work around?
Ok I solved 2 first. I run into this all the time when I’m styling still wrapping my head around it. To make the arrow blue on hover of that div block 22. You need to remove the styling from the arrow text, if you have it used elsewhere add a class and then remove styles from it. Then apply the hover to the div. If you only want that to be blue and not the White text beside it. Make sure the text is styled itself in white that way it will overwrite the div and won’t be affected by the hover.
@jbleroux Thanks for your response!
I understand this part. I’m actually trying to effect the smaller, dark arrows to change color. The ones besides the smaller headers like “Welcome Bags”, etc. The problem I’m running into, and didn’t mention above, is that I have an interaction which effects those arrows on the parent div. Each arrow has a separate class that the interaction uses to identify an arrow to flip when its parent div is clicked. So, in short, my thinking is if I remove each class on the arrows in order for the parent div hover state properties to take over, I will lose my interaction of flipping arrows when the div is clicked? Any ideas on how to keep the interaction intact?
Yeah, I don’t remember when I stumbled upon that fix. Probably after I loaded a bunch of styles on top of one another as I would say structure is something I’m still grappling with. Glad I could help. It’s a handy little feature to know about. When in doubt try removing styles.
