Streaming live at 10am (PST)

Close Modal Button


#1

For some reason, my close modal button is not showing the colors I chose and put in the embed code. At least not on my end...Here is the live website link: http://rentberry-remake.webflow.io/

Click on the Sign In (upper right after you scroll down a bit) and look at the close modal button in the upper right corner (circle with x in it). It should have a white circle with a gray/purple x, and when you hover over it, the circle should turn purple and the x should turn white...? I see a dark gray circle before hover, but my code says the circle should be white...

https://preview.webflow.com/preview/rentberry-remake?preview=15ed7e81d4e4ecd6f49063c4786fe56a


#2

You have duplicate class selector declarations. Remove all the white you see below right panel.


#3

In my embed code, that only appears once for my close modal button...could it be that because I use that same code for my Facebook, Twitter, and Email embed links in the navbar? Are those connected somehow and that's why it shows duplicates?


#4

Yep, that's what it is. Ok, so how do I fix that? How can I use fa-circle for both my social media links in the navbar and as my close modal button, but give them different styles?


#5

You can always add a combo class for every permutation of the original style, or make the selector more specific to the section.


#6

Sorry, I'm still learning HTML and CSS, how do I make a different combo class or more specific selector in this case? Thanks for the help!


#7

For example, if you want the style to only apply to the close button,

Instead of

.fa-stack:hover .fa-circle

You add a parent class in front

.close-embed-button .fa-stack:hover .fa-circle

Doing this will make this style more 'important' than the one that is more general.


#8

Oh wow, ok got it! Thanks so much!


#9