Sidebar


Hide Sidebar

To hide a sidebar on a specific page, add this style to the page header code injection.

<!-- Hide Sidebar -->
<style>
.has-sidebar .maincontent .contentwrapper {
  width: 100% !important;
}
.sidebar {
  display: none !important;
}
</style>

Hide Sidebar On Mobile

To hide a sidebar on mobile, add this style after the plugin code:

<style>@media (max-width: 767px) { .sidebar { display: none !important; } }</style>

Place Sidebar Above Content On Mobile

To place a sidebar above a content on mobile, add this style after the plugin code:

<!-- Plugin Sidebar - Place Sidebar Above Content On Mobile -->
<style>
@media (max-width: 768px) {
  .has-sidebar .maincontent {
    display: flex !important;
    flex-direction: column;
  }
  .sidebar {
    order: -1;
  }
}
</style>
<!-- end Plugin Sidebar - Place Sidebar Above Content On Mobile -->

A different sidebar for each blog


Move Sidebar Under First Section on Index Page

Note: Tested only on the Brine family templates. Add this code after the plugin code:

<!-- Move Sidebar Under First Section on Index Page -->
<script>
window.addEventListener('sidebarAdded', function () {
  var section = document.querySelector('.Index-page');
  if (section) {
    var parent = section.parentNode.parentNode;
    parent.insertBefore(section, parent.firstElementChild);
  }
});
</script>
<!-- end Move Sidebar Under First Section on Index Page -->
sidebarDmitry Kiselyov