# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://slides.gitbook.io/manual/panels.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.