Code Snippet Explanation

This code snippet updates the look and feel of the filter bar on pages to a more modern feel. It also left aligns courses in search results for a better user experience. This code snippet does not need to be edited and can be used as is to create the following look:

Installation Instructions

Step 1: Navigate to the Code Snippets section of your domain Theme and paste the below code at the bottom of the Global Head Snippet. 

Snippet Code - Add to Global Head Snippet in Theme:

<!-- START Floating Filter Bar Styling -->
<style>
/* remove border and background color of left nav */
.catalog-filters #catalog-left-nav {
  background-color: transparent;
  border: unset;
}

/* floating filter bar stylings */
.catalog-filters #catalog-left-nav .catalog-left-nav-wrapper {
  border-radius: 4px;
  box-shadow: 0 2px 12px 4px rgba(0,0,0,.15);
  padding: 24px;
  overflow-y: scroll;
  width: 100%;
  scrollbar-width: none;
  background-color: #FFFFFF;
}

/* add right margin to filter name */
.filter-option .filter-counter {
    margin-left: 5px;
}

/* hide expand/collapse all button - isn't useful */
a#catalog-filter-expand-collapse {
    display: none;
}

/* lower margin below search box */
.catalog-search-input-group {
    margin-bottom: 10px;
}

/* left align courses in search results */
.search .catalog-center-width{
  max-width: unset !important;
}
</style>
<!-- END Floating Filter Bar Styling -->