By Stephen Walker

Customizing the Off Canvas Background

Share

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 September 25, 2022

Most Advanced WordPress Form Builder

Leave a Reply

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

RELATED ARTICLES

  • Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

  • Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

  • Food Menu

    This is a style for creating a food menu whit a dashed line between the item and the price.

  • Horizontal Scrolling Columns and Column Overlays

    This weekend I put together to examples as a result of requests and conversations on the Facebook group.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.