CSS support (Foundry)

I’m wondering if anyone can figure out the css I need for something.

I have a Foundry site with a modal navigation. I generally like how it looks but the close button is tucked away in the top right and not super noticeable.
I tried to get it sorted via Blacksmith but couldnt quite get it to work and I’m not figuring out which selector I should be using to do it via the CSS window. I’d like it a little further away from the corner and a bit bigger.

The site is here: https://pops.jbostick.ca (password demo). If you click the orange menu icon, you’ll see it

Couldn’t you throw the button in a F3 spacing stack? Then adjust the padding?

That’s sort of how I have it now. Menu button is in a pin stack, and I’m good with how it looks.

It is the ‘X’ to close the modal that I can’t figure out (and that is controlled by the Modal stack). The padding options in the screenshot below don’t impact it, btw

It’s the ‘.btn-close’ selector, which determines the appearance of the ‘close’ button in the modal.

image

I could change in the browser e.g. the width & height & font-size properties to make the ‘x’ much more pronounced. Since the properties are already defined in a CSS file, you might have to add an ‘!important’ to your CSS definition, if it doesn’t overwrite the original definition.

The hover state doesn’t look nice either - you might modify this look by adding your CSS definitions with the selector ‘.btn-close:hover’

(Disclaimer: I am not a CSS expert, but this is the info revealed by the ‘web inspector,’ and hopefully a good starting point)

2 Likes

I posted a fix on my Foundry chat space…

3 Likes