Setting Up The Sliding Bar

Setting Up The Sliding Bar

13/06/2018

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.

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.

How To Add Widgets to the Sliding Bar

Step 1 - To add widget sections to the sliding bar, navigate to WP Dashboard > Appearance > Widgets.

Step 2 - You will see a 'Slidingbar 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 sections on the right side. View the 'Widget Sections Overview' screenshot here.

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

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.

Recent Posts

Recent Tweets

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