> For the complete documentation index, see [llms.txt](https://slides.gitbook.io/manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://slides.gitbook.io/manual/panels.md).

# 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](/manual/slides.md#scroll-effect). If you want to make the panel fixed to the top/bottom of the screen, simply add a class `fixed` on it.

## Sections <a href="#sections" id="sections"></a>

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:

```html
<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 <a href="#responsive-panels" id="responsive-panels"></a>

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:

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

## Force Mobile View <a href="#forcemobileview" id="forcemobileview"></a>

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.

```html
<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 <a href="#panel-hide-on-scroll" id="panel-hide-on-scroll"></a>

You can hide panels on a scroll with the [Scroll Effect](/manual/slides.md#scroll-effect) using a `hideOnScroll` classes on your `panel` element.

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

### Hide on Scroll Sensitivity <a href="#panel-hide-on-scroll-sensitivity" id="panel-hide-on-scroll-sensitivity"></a>

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

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

We've also created a few useful [examples](https://designmodo.com/slides/app/preview/example/panel-hide-on-scroll/?effect=scroll) of panel customization.

## Custom Visibility <a href="#panel-custom-visiblity" id="panel-custom-visiblity"></a>

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.

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