Navigation Layered Close Button Position

[timothyc]

Hello,

With reference to the Navigation Layered Element, is there a way that I could move the Close ‘X’ to the bottom centre rather than keeping it at the top left or right corner?

Thank you.

[albrecht]

Hi Timothy,

Thanks for writing in. To achieve that, try adding this custom css.

.x-off-canvas .x-off-canvas-close {
    bottom: 0;
    top: auto;
    right: 6em;
}

If it doesn’t work, please send as a link to your site so we can give an accurate css. Thanks!

[timothyc]

Thank you. It works. I did however change the right to left as the off-canvas location is set to left.

However, i can’t get it dead centre based on device width. Do you have any advise?

Thank you.

[christian]

Hey Timothy,

Try changing the right property to this:

  left: 50%;
  transform: translate(-50%, -50%);

You can learn centering tricks from this article: https://css-tricks.com/centering-css-complete-guide/

Also, please note that the selector .x-off-canvas .x-off-canvas-close is also used by other Off Canvas elements like the Content Area Off Canvas the code provided by Albrechtx will also affect that element.

If you don’t want that to happen, change the CSS selector to this: $el .x-off-canvas-close. And, put the complete code in the Element CSS and not Content CSS or Global CSS.

Overall code would look like this:

$el .x-off-canvas-close {
  bottom: 0;
  top: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hope that helps.