By Stephen Walker

Customizing Toggle (Accordion) Headings

Share

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.

Since it is unlikely this would be appropriate for every toggle element, simply assign a class to the toggle element — in this example, I used main-menu__accordion. The targeted elements are the panel-heading and the fusion-toggle-heading with the latter reducing the space between the text and the icon.

.main-menu__accordion .panel-heading {
  display:flex!important;
}
.main-menu__accordion .fusion-toggle-heading{
  margin-right: 16px!important;
}

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.

  • Using Avada Elements in the Block Editor

    Using Avada elements in the block editor to optimize tips and tricks.

  • 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 the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.