Flatsome tutorial

How to Create a Top Bar Slider

In this video tutorial I’ll explain how to create a custom top bar displaying unique selling points in your Flatsome website. Great for webshop owners, showing your visitor your unique features or services.

1. UX Shortcode

[section label="USP Top Bar" bg_color="rgba(0, 0, 0, 0)" bg_overlay="rgba(0, 0, 0, 0)" dark="true" padding="0px"]

[ux_slider draggable="false" arrows="false" bullets="false" timer="3000" pause_hover="false"]

[row label="USP 1" style="collapse" width="full-width" h_align="center"]

[col span__sm="12" span__md="12" align="center"]

  • Free shipping world wide
[/col] [/row] [row label="USP 2" style="collapse" width="full-width" h_align="center"] [col span__sm="12" span__md="12" align="center"]
  • Next day delivery*
[/col] [/row] [row label="USP 3" style="collapse" width="full-width" h_align="center"] [col span__sm="12" span__md="12" align="center"]
  • Hassle free returns
[/col] [/row] [/ux_slider] [/section]

2. CSS

/*************** TOP BAR - SLIDER ***************/

#top-bar ul li.bullet-checkmark:before, #top-bar ul li.bullet-arrow:before, #top-bar ul li.bullet-star:before {
    color: #ccc; /* Change icon color */
}

#top-bar .flex-center {
    flex: 1;
}

#top-bar .header-block ul {
	margin-bottom:0px; 
	display:inline-block;
}

#top-bar ul li.bullet-checkmark, #top-bar ul li.bullet-arrow, #top-bar ul li.bullet-star {
	border-bottom: 0px;
}

Need professional design help?

Let's take your Flatsome shop to the next level.

Seb's design service

💎 Improve your Flatsome design in 30 minutes

Get 22 design tips that every Flatsome site could use.