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;
}

Originally published on Sept. 25, 2022

person playing musical instrumentCustomizing Toggle (Accordion) Headings
ScriptsOrganizer and Avada

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023