Streaming live at 10am (PST)

What is overriding styling of fonts?


#1

Hi Webflow Crew!

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.

Can someone let me know what I'm missing here?

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?

Thanks so much in advance for any help!!!


Here is my public share link: https://preview.webflow.com/preview/hollys-area-guide-template?preview=107dde3670a475b7b77c304ab9d32ca3


#2

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.


#3

https://v.usetapes.com/3FzaqMX2um


#4

Vincent! You rule! Thank you!


#5

@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?


#6

The same property applies remove just the style from the arrow not the class.

once I did that once you hover on the div or the header line I guess it changes to blue. Is this what you want to do?


#7

@jbleroux YES! That's exactly what I wanted to make happen! I didn't realize I could remove individual style properties. Thank you so much!


#8

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.


#9

Thanks, again, for taking the time to point me to this @jbleroux!!!


#10

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