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.
background: radial-gradient(circle,var(--awb-color6) 0,var(--awb-color8) 100%)!important;
background: url(https://awb4wp.com/wp-content/uploads/2022/03/avada-logo-rgb.svg) no-repeat center right 5vw;
content: ""; /* adust as needed */
height: 100%; /* adust as needed */
width: 100%; /* adust as needed */
Originally published on September 25, 2022