**This procedure explains how to configure the sticky ba bar to boost engagement.**

## Step 1 | Sticky bar definition 



 

 

 



   ![sticky bar definition ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/04/202504171458%20%282%29.gif?itok=5moQfL9R)   





 

 





 

 

To create a sticky bar, go to **Structure** and click **Sticky Bar Definition**. In this menu, each row represents a sticky bar item (or block). To set up or edit a block, click **Edit** on the far right of the row.

Sticky bar types include:

- **Your Needs** – displays a page using its Node ID
- **Contact** – shows a Webform
- **Business Cases** – lists business case content with filters
- **Find an Office** – links to the Location content type
- **External Redirection** – redirects to an external link, with an optional mini form
- **Link 1–4** – external URLs, with an option to open in a new tab
- **Page 1–4** – displays or redirects to a page via Node ID or link



 

 

 



 

 

 

 





   ![sticky bar types gif](/sites/g/files/dvc2391/files/styles/media/public/image/2025/04/202504291624.gif?itok=O9y_cLHK)   





 

 





 

 

On the edit page, start by checking the "**Enabled**" box to make the block visible.

Next, choose an **icon** from the available list; [here](https://drive.google.com/file/d/1c8LJO8V1PLfTtfIRpq4_Z2tiv0jggYSL/view?usp=drive_link), a document detailing each icon and its corresponding meaning is available for reference. Optionally, define an icon background color with a specific color code (like [\#RGBDDP)](#RGBDDP)).

For the **Contact** sticky bar, the last step is to fill in a **Webform**. For the **Link 1–4** sticky bar, the last step is to enter **an external URL**, with the option to open it in a new tab if needed.

Finally, don't forget to **save** the configuration to apply your changes.



 

 

 



 

 

 

 





 

 

 

 






## Step 2 | Sticky bar set up



 

 

 



   ![Sticky bar types set up](/sites/g/files/dvc2391/files/styles/media/public/image/2025/04/202504291624%20%281%29.gif?itok=JC2EYoeN)   





 

 





 

 

On the edit page, check the "Enabled" box to make the block visible. Then, enter a title and check "Display title" if you want it shown. You can also add an optional description.

Some sticky bar types require slightly different setup steps:

**Your Needs**: After setting the title and description, input the **Node ID**, found in the URL of the node’s edit page.

**Contact**: After the title, enter a **step message** (used to guide users through the form).

**Business Cases** and **Find an Office**: No additional fields beyond title and optional description.

**External Redirection**: In addition to title and description, fill in the following fields: **form description**, **field title**, **field placeholder**, **button text**, **URL prefix**, an optional **pattern for allowed values**, and the **error message** to show if the input is invalid.

**Link 1–4**: Add an external URL with an option to open it in a new tab.

**Page 1–4**: Enter a **link** to redirect the user to the page directly, without a popup window.



 

 

 



 

 

 

 





 

 

    ![BG - Green 2](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2025/11/BG%20Green%20%284%29.jpg.webp?itok=Xxp2W-5F)   





 

 

 

 

 






## Step 3 | Sticky bar visibility settings

 



 

 

 



   ![sticky bar vsibility](/sites/g/files/dvc2391/files/styles/media/public/image/2025/04/202504171458%20%284%29.gif?itok=FwqVHbdV)   





 

 





 

 

To make the sticky bar visible on specific pages, go to **Configuration** > **User Interface** > **Sticky Bar**, then click on **Sticky Bar Visibility Settings**.

In this section, you can specify the pages by entering **their paths** — one per line. The **" \* "** character can be used as a wildcard. For example, **" /user/\*"** targets all user pages, and **" <front>"** represents the front page.

You can also use the checkboxes below to define whether the sticky bar should be **shown** or **hidden** on the specified pages.

If the visibility field is left empty, the Sticky Bar will continue using the global visibility settings.

When visibility is configured directly on an individual Sticky Bar, this local setting takes priority over the global configuration.



 

 

 



 

 

 

 





 

 

   ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/08/HP%20BG%20-%20grey%20very%20pale.png.webp?itok=OY0Zt4pI)   





 

 

 

 

 





##  Explore more configuration options 

 [   ![Basic settings picto in dark green ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/04/DATA.jpg.webp?itok=_xepKVk0)   ](/site-configuration/basic-site-settings)[Basic settings ](/site-configuration/basic-site-settings)

 

###       [Basic settings ](/site-configuration/basic-site-settings) 

 

 

 



 

 [   ![navigation settings picto dark green](/sites/g/files/dvc2391/files/styles/media/public/image/2025/04/DATA%20%283%29.jpg.webp?itok=T62AwVR5)   ](/site-configuration/navigation)[Navigation settings ](/site-configuration/navigation)

 

###       [Navigation settings ](/site-configuration/navigation) 

 

 

 



 

 [   ![Compliance dark green picto](/sites/g/files/dvc2391/files/styles/media/public/image/2025/05/DATA%20%283%29.png.webp?itok=JKgH_L4n)   ](/site-configuration/compliance)[Compliance](/site-configuration/compliance)

 

###       [Compliance](/site-configuration/compliance) 

 

 

 



 

 [   ![redirects dark green picto](/sites/g/files/dvc2391/files/styles/media/public/image/2025/04/DATA%20%287%29.jpg.webp?itok=rI9xWqeU)   ](/site-configuration/redirections)[Redirections](/site-configuration/redirections)

 

###       [Redirections](/site-configuration/redirections) 

 

 

 



 

 [   ![Taxonomy](/sites/g/files/dvc2391/files/styles/media/public/image/2025/05/DATA%20%284%29.png.webp?itok=6bu0zSY8)   ](/site-configuration/taxonomy)[Taxonomy](/site-configuration/taxonomy)

 

###       [Taxonomy](/site-configuration/taxonomy) 

 

 

 



 

 

  Previous         Next