Panels

You can add top and bottom panels over slides to control the placement and appearance of a logo, buttons, and/or menu items. Basically, you can put any element anywhere you want. By default, panels are fixed for all Scroll effects, except Scroll. If you want to make the panel fixed to the top/bottom of the screen, simply add a class fixed on it.

Sections

Depending on your design preference, there could be one, two or three sections inside a panel. Here is a simple example of a top panel with three sections:

<nav class="panel top">
  <div class="sections">
    <div class="left">
      <!-- Left side -->
    </div>
    <div class="center">
      <!-- Center -->
    </div>
    <div class="right">
      <!-- Right Side -->
    </div>
  </div>
</nav>

Responsive Panels

As usually happens in such cases - more narrow displays may not have enough space to fit all the information. We have provided a compact version for your panels:

<nav class="panel top">
  <div class="sections desktop">
    <!-- Desktop Menu Contents -->
  </div>
  <div class="sections compact">
    <!-- Compact Menu Contents -->
  </div>
</nav>

Force Mobile View

Javascript code provided with slides will automatically calculate the minimal width needed for your content both on resize and load to switch on compact version and back. You can force to switch to the compact panel on mobile devices by adding a forceMobileView class on panel element. Even if there is enough space to show a panel content it will switch to the compact version on mobile devices.

<nav class="panel top forceMobileView">
  <div class="sections desktop">
    <!-- Desktop Menu Contents -->
  </div>
  <div class="sections compact">
    <!-- Compact Menu Contents -->
  </div>
</nav>

Find all top and bottom panels on slides/library/panel/ folder.

Hide on Scroll

You can hide panels on a scroll with the Scroll Effect using a hideOnScroll classes on your panel element.

<nav class="panel top hideOnScroll">
  <!-- Panel contents -->
</nav>

Hide on Scroll Sensitivity

You can change the scroll sensitivity to hide the panel with the following setting:

<script>
  //default
  window.hideOnScrollSensitivity = 100;
</script>

We've also created a few useful examples of panel customization.

Custom Visibility

You can set your panels visible only on the first or last slides with firstSlideOnly, lastSlideOnly, exceptLastSlide, exceptFirstSlide, and firstAndLastSlidesOnly classes on your panel elements.

<nav class="panel top firstSlideOnly">
  <!-- Panel contents -->
</nav>