Customizing the Off Canvas Background

The off-canvas feature is a great addition to Avada and makes the ability to create menus and popups a breeze. One thing that is missing is the ability to add certain background styling — gradient background and image positioning. Like most things with Avada, by knowing the element to target, this is fairly easy.

The key element of the off-canvas is awb-off-canvas-inner. Assign a class name to the overall canvas — main-menu in this example — then add the styles to the custom CSS settings for the particular off-canvas (for ease of management). You can add a pseudo-class ::before if you want a background image )company logo in the background.

.main-menu .awb-off-canvas-inner{
  background: radial-gradient(circle,var(--awb-color6) 0,var(--awb-color8) 100%)!important;
}
.main-menu .awb-off-canvas-inner::before{
background: url(https://awb4wp.com/wp-content/uploads/2022/03/avada-logo-rgb.svg) no-repeat center right 5vw;
content: ""; /* adust as needed */
position: absolute;
bottom: 0;
right: 0;
height: 100%; /* adust as needed */
width: 100%; /* adust as needed */
opacity: .09;
}