Move close button on modal windows

[finkk]

Hello there,

I am using modal navigation containing a Navigation Layered element.

Can we move the close button with the settings or do we need to use CSS?

The site is here: http://morpheusrisk.com/

Kind Regards,

Spencer

[prakash_s]

Hello Spencer,

Thanks for writing to us.

Yes you can move the close button for that, you need to go to the Navigation Modal—>Modal—>Close Location—>Set the location from here

Hope it helps
Thanks

[finkk]

Hi,

Thanks for getting back to me. I have found those settings but wanted to move the button inside of the modal window itself. Please see the attached image for the positioning we would like to achieve.

My client and his staff have found the positioning difficult to use - none of them realised there was a close button at all, although much of this is down to their own eyes!

Kind Regards,

Spencer

[prakash_s]

Hello Spencer,

To move the modal close button inside the content you need to add custom CSS code

You need to go to the Modal element —>Customize —>Edit CSS—>add the CSS here.

@media (min-width: 993px){
$el.x-modal .x-modal-close {
    color: hsl(0deg 0% 0%);
    position: absolute;
    left: 54em;
    top: 54px;
  }
}

Please feel free to change the value of left and top as per your design.
Please note that the code provided in the above thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer or you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps
Thanks

[finkk]

Hi,

Thanks for getting back.

Unfortunately, this CSS does not help - the position: absolute causes it to disappear.

I added a position: relative onto the parent class .x-modal in the hope it would help contain the button, but that then caused the modal window itself to disappear to the bottom of the page.

I have tried adding right: and top: percentage positioning but the button just moves all over the place.

Please see the attached pic showing where we want the button. It seems odd that positioning the button in such an obvious place is so difficult! Sorry, this isn’t a complaint, but in testing my client’s staff have all said the button’s position is far too far away for it to be obvious.

Kind Regards,

Spencer

[marc_a]

Hi Spencer,

The code given by my colleague was right, the reason why it is disappearing is because of the color. I suggest that you update the code to this one:

@media (min-width: 993px){
$el.x-modal .x-modal-close {
    position: absolute;
    left: 54em;
    top: 54px;
  }
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.