> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/general/sidebars.md).

# Sidebars

Turning sidebars on, styling them, and making them follow the page.

{% embed url="<https://www.youtube.com/watch?v=rXa6J4VpmA0>" %}

Kalium offers extensive options to customize the sidebars on your website, allowing you to create the perfect layout for your content. The sidebar settings can be accessed by navigating to **Appearance -> Customize -> Sidebars** in your WordPress dashboard. Below is a detailed guide to the different customization options available for sidebars in Kalium.

### Sidebar Types

Kalium provides two distinct types of sidebars, each offering different design capabilities:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-33046f69dceac16b4a31757a422d18a02a691837%2Fsidebars-1.jpg?alt=media" alt="" width="321"><figcaption></figcaption></figure>

* **Type 1:** This is a traditional sidebar without any background or border. It's ideal for a clean, minimalist look.
* **Type 2:** This type allows you to add more design elements, such as a background, border, border radius, and shadow, giving you greater control over the appearance of your sidebar.

### Sidebar Options

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-42c7ccdde2275af8e6ef29a0878f5bdc3e3ad411%2Fsidebars-2.jpg?alt=media" alt="" width="334"><figcaption></figcaption></figure>

#### Sidebar Width

You can set the width of the sidebar as a percentage of the overall page width. This allows you to control how much space the sidebar occupies relative to the main content area.

#### Sidebar Gap

This setting controls the gap between the sidebar and the main content. Adjusting this can help to create a more balanced layout.

#### Inner Spacing *(Type 2)*

Allows you to define the inner spacing (padding) within the sidebar or widget if they are separated. It’s useful for ensuring that your sidebar content has enough breathing room.

#### Widgets Vertical Spacing

This option sets the gap between individual widgets within the sidebar. It helps maintain consistent spacing and a clean look.

#### Separate Widgets *(Type 2)*

Allows you to separate each widget within the sidebar, giving them a distinct appearance.

#### Mobile Position

This setting lets you choose whether the sidebar should appear at the top or bottom of the page when viewed on mobile devices.

### Sticky Sidebar

Kalium offers a sticky sidebar feature that keeps the sidebar visible as the user scrolls down the page. You can toggle this feature on or off and customize it with the following options:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-e5b8e4a35929da4b828a77d480a19bfefad64582%2Fsidebars-3.jpg?alt=media" alt="" width="329"><figcaption></figcaption></figure>

* **Sticky Behavior:**
  * Entire Sidebar: The entire sidebar remains sticky.
  * Widget&#x73;**:** Only the last widgets stay sticky. Choosing this reveals **Last Widgets**, the number of bottom widgets to keep, which starts at 1.
* **Offset From Top:** This setting controls the distance from the top of the page when the sidebar becomes sticky.

### Visible On

You can control whether the sidebar is visible on different devices by toggling the respective options:

* Desktop
* Tablet
* Mobile

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-0deddfcd7d440caeb62c9486ae28a73fd256314a%2Fsidebars-4.jpg?alt=media" alt="" width="330"><figcaption></figcaption></figure>

***

### Style

The Style tab provides a range of customization options that allow you to style the sidebar's text and container to match your website's design.

#### Text

* **Title & Text:** Customize the color of the sidebar titles and text.
* **Links:** Set the color for links in their normal and hover states.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-afcf146f4d87c842a8451e2706b72cfff75f19bd%2Fsidebars-5.jpg?alt=media" alt="" width="331"><figcaption></figcaption></figure>

#### Container *(Type 2)*

* **Background Color:** Choose a background color for your sidebar container.
* **Border Width, Type, and Color:** Define the border's width, style, and color for the sidebar or widgets if separated option is on.
* **Shadow:** Add a shadow effect to the sidebar for a more dynamic look.
* **Border Radius:** Customize the corner rounding (radius) of the sidebar’s border.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-eb5e829e5e8844ebb920162073b7e254ac9e5867%2Fsidebars-6.jpg?alt=media" alt="" width="323"><figcaption></figcaption></figure>