How to use the Topbar section

This article will show you how to add a Topbar to your page to draw visitors’ attention. 

How to add the Topbar section to your page

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

Step 2:  Access the Library from the top bar of the Editor Page.



Next, navigate to Sections > Top Bar and look for your preferred section.



Hit “Insert” to add it to your Editor. 

Configure the section’s settings

After that, you will find the Topbar added to your Editor. Click on the section to start configuring the settings.

Change position

The Topbar will be placed at the top of your page below the Header by default. You can move it above your Header by clicking on the arrow icon. However, you won’t be able to move this section under the main part. 



General Settings

Background Banner: Select “Image” to add a background image for your Topbar section. Otherwise, select “Color.”

Background Color: Choose a color from the list or enter a hex color code for the background color of your section.



Click on “More General Settings,” you will see more options to customize your Topbar section, including:

  • Sticky Topbar: Select Enable to turn on the Sticky option. Your top bar will be sticky at the top of your page when scrolling.

  • Adjust the Margin/ Padding for the section.

  • Animation: Select the animation for your content from the dropdown menu. You can click on “Preview” to see how the animation works on the live page.



You will see a list of atoms included in the Topbar section. Each atom represents one element of your section.  Hover over the atom, click on the Eye icon to hide/show the atom then.



To edit the settings of each atom inside the Topbar section, click on the atom to reveal its configuration on the left sidebar. 


That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.

Was this helpful?