Close Modal Button

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:

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…

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

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?

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?

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

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!

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.

1 Like

Oh wow, ok got it! Thanks so much!