The top bar is a header component that allows merchants to access menus, and navigate by clicking, choose language and currency. It’s always visible at the top of interfaces.
![1.png](https://helpdesk.the4.co/storage/12748/9T7ifrysqpdZweiqzjstdyiAlaedofVzye8VBOG1.png)
Steps:
From Theme editor (Customize) > Top bar.
![1.png](https://helpdesk.the4.co/storage/12300/moMgqbYcH0rRJSOnvUMtsVunqwoR27bw8OX1MBXN.png)
1. Top bar content
This section supports this following blocks:
![1.png](https://helpdesk.the4.co/storage/12749/AJE3Qv62wfy1KfJ39dPkIvTls9FFf2ITiyfipuCt.png)
Custom html: This block help you generate your HTML content.
![1.png](https://helpdesk.the4.co/storage/12750/nu9frmHeLxYsKmNc55OEKIKkGBxPbqDszARBc0e3.png)
Rich text: You can add Rich text here and with block settings you can easily customize it.
![1.png](https://helpdesk.the4.co/storage/12751/PdhGmt8agaFhNu0vdvqAj9H9zyvUPphSAMwSlluD.png)
Currency, Language,...
![1.png](https://helpdesk.the4.co/storage/12752/AqEq4FwCOAZk9yk0zGyofOECqp8txuv5TcExoGC3.png)
Social: you can add social icon here.
![1.png](https://helpdesk.the4.co/storage/12753/NhOaExpn7s623D1e30D0xRARyroHOuJTMU953gVs.png)
Menu: You can add menu with this block.
![1.png](https://helpdesk.the4.co/storage/12754/HBJJya4GkbWxOpf3FaqB8ulpXMLfNZVkcCspLsHj.png)
2. How to configure the Top bar?
- GENERAL OPTIONS
With these settings you can set the effect for the section, display on any devices, colors, border, button.
- DESIGN OPTIONS
You can set Padding top, padding right, padding bottom, padding left for section. If you do not use it please blank.