Setting Up The Sliding Bar

12/03/2019

The Avada Sliding Bar is a widgetized section that can collapse and expand by clicking the active icon. This is perfect for adding information,content, widgets, buttons, menus etc to engage your audience. You can choose between 1-6 columns for the sliding bar, and you can choose the position of the sliding bar to be the top, left, right, or at the bottom of your site. You can also choose to make it sticky (for top or bottom position only). See the sliding bar live in some of our demos here: Classic, Promote, Adventure, University, and Information Technology.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

How To Setup The Sliding Bar

Step 1 - Navigate to Avada > Theme Options > Sliding Bar.

Step 2 - The Slider Bar can be enabled/disabled on desktop and mobile using the 'Sliding Bar on Desktops' and 'Sliding Bar On Mobile' options. Using the sliding bar on mobile is limited due to space, please see the description in theme options, and the important note below.

Step 3 - Choose where you want it to be positioned (Top, Right, Bottom, or Left). For Top and Bottom positions, you will have the option to make it sticky.

Step 4 - Decide whether if sliding bar opens on page load by default, the number of columns (1-6), and the content alignment (Left, Center, Right).

Step 5 - New features were added in Avada version 5.5, these options are 'Sliding Bar Width', 'Sliding Bar Column Alignment', and 'Sliding Bar Content Padding'. The 'Sliding Bar Width' and 'Sliding Bar Column Alignment' options are only available if you choose Right or Left position only. Set these options the way you want it.

Step 6 - Styling options are found under Sliding Bar Styling section and under this section, you can set the style you want for the sliding bar toggle. You can choose from Triangle, Rectangle, Circle, or Main Menu Icon options.

Step 7 - For the other styling options, you can choose a background color, background color opacity, toggle color, heading font size, font color and more. You can also choose to turn on or turn off the border on your sliding bar.

Step 8 - Once you’re done setting the options, click 'Save Changes' button.

Please continue reading below to learn more about each of the Sliding Bar options.

Please Note - If the sliding bar is turned on for mobile, it is important to note that due to mobile screen sizes and overlapping issues, the triangle toggle style in the top right position will be forced on mobile regardless of your selections and desktop styles.

Sliding Bar Position

As of Avada 5.3, the Sliding Bar position can be selected as Top, Right, Bottom, or Left. This is set in the Theme Options: Avada > Theme Options > Sliding Bar > Sliding Bar Position.

On top of this, the Sliding Bar can be made sticky when in either the Top or Bottom position. This means that the Sliding Bar stays visible at the Top or the Bottom of the viewport when you scroll. This Sticky setting is not needed when choosing Left or Right, as the Sliding Bar will always be visible when in those positions.

Another main option is the Sliding Bar Width. This controls the width of the sliding bar on left/right layouts. With Top, and Bottom positions, the widget content determines the height of the Sliding Bar.

These changes go a long way towards enabling the type of setup, long asked for by users, such as the custom Sliding Bar on our Demo sites that show the other demos. With some imagination and the right content, almost anything is possible with the Sliding Bar.

Number Of Sliding Bar Columns

With the Sliding Bar, you can have anywhere from 1 to 6 columns. This is set in the Theme Options - Avada > Theme Options > Sliding Bar > Number of Sliding Bar Columns.

When using the Left or Right positions, there is also an option for the alignment of the columns. Select between Stacked or Floated. This effectively makes your widget content display in rows (Stacked) or columns (Floated).

For Top, and Bottom positions, the columns themselves are evenly distributed across the full site width. There is also the option to control the content padding in the columns via the Sliding Bar Content Padding section.

Sliding Bar Toggle Style

There are also several styles you can choose to style your Sliding Bar Toggle. These are Triangle, Rectangle, Circle, and Main Menu Icon. These options are found in the Theme Options: Avada > Theme Options > Sliding Bar > Sliding Bar Styling > Sliding Bar Toggle Style. See a screenshot of the area here.

These options also affect the placement of the Sliding Bar Toggle. For the Triangle, the Toggle is at the very corner of the viewport (corresponding to the position you have selected). For the Rectangle, the Toggle is placed in from the edge to create a tab effect, while the Round option positions the Toggle freestanding, away from the edge. The Main Menu Icon option places the Toggle in the Main Menu instead, as a + symbol. You can select the color of the Toggle via the Theme Options.

How To Add Widgets To The Sliding Bar

Step 1 - To add your widget areas to the Sliding Bar, navigate to WP Dashboard > Appearance > Widgets.

Step 2 - You will see a 'Sliding Bar Widget X' section on the right hand side for each Sliding Bar column (from 1-6 columns) selected in theme options. To add the widgets, drag and drop the widgets you want from the left side into the sliding bar widget areas on the right side.

To learn more about widgets and all they can do across the theme, please visit the Widget section of our documentation.

View Widget Documentation

Sliding Bar Options

The Theme Options for the Sliding Bar can be found at Avada > Theme Options > Sliding Bar. See below for a rundown of each option.

Sliding Bar on Desktops - Illustrated as A. Allows you to display the sliding bar on desktops.

Sliding Bar on Mobile - Illustrated as B. Allows you to display the sliding bar on mobiles. Important Note: Due to mobile screen sizes and overlapping issues, when this option is enabled the triangle toggle style in the top right position will be forced for square and circle desktop styles.

Sliding Bar Open On Page Load - Illustrated as C. Allows you to have the sliding bar open when the page loads.

Sliding Bar Position - Illustrated as D. Allows you to set the position of the sliding bar to be in the top, right, bottom, or left of your site.

Sliding Bar Width - Illustrated as E. Allows you to set the width of the sliding bar on left/right layouts. Enter value including any valid CSS unit. For example: 300px

Sticky Sliding Bar - Illustrated as F. Allows you to enable a sticky sliding bar. Note: This option is available for top/bottom position only.

Number of Sliding Bar Columns - Illustrated as G. Allows you to set the number of columns you want to have in the sliding bar.

Sliding Bar Column Alignment - Illustrated as H. Allows you to have the sliding bar columns be stacked (one above the other) or floated (side by side). Note: This option is available for right/left position only.

Sliding Bar Content Padding - Illustrated as I. Allows you to set the top/right/bottom/left paddings of the sliding bar area. Enter values including any valid CSS unit. For example: 35px, 30px, 35px, 30px

Sliding Bar Content Alignment - Illustrated as J. Allows you to set the sliding bar content alignment to Left, Center, or Right.

Sliding Bar Toggle Style - Illustrated as K. Allows you to set the appearance of the sliding bar toggle to Triangle, Rectangle, Circle, or Main Menu Icon.

Sliding Bar Background Color - Illustrated as L. Allows you to set the background color of the sliding bar.

Sliding Bar Item Divider Color - Illustrated as M. Allows you to set the divider color in the sliding bar.

Sliding Bar Toggle/Close Icon Color - Illustrated as N. Allows you to set the color of the sliding bar toggle icon and the close icon when using the Main Menu Icon as toggle style.

Sliding Bar Heading Font Size - Illustrated as O. Allows you to set the font size for the sliding bar heading text. Enter value including CSS unit (px, em, rem). For example: 13px

Sliding Bar Headings Color - Illustrated as P. Allows you to set the text color of the sliding bar heading font.

Sliding Bar Font Color - Illustrated as Q. Allows you to set the text color of the sliding bar font.

Sliding Bar Link Color - Illustrated as R. Allows you to set the text color of the sliding bar link font.

Sliding Bar Link Hover Color - Illustrated as S. Allows you to set the text hover color of the sliding bar link font.

Border on Sliding Bar - Illustrated as T. Allows you to display a border line on the sliding bar which makes it stand out more.