Customize the Quick Link Navigation Bar for Mobile Apps

The ease of navigation of your app determines the experience it provides to its users. The bottom navigation bar is vital in providing ease of navigation. In this tutorial, we take you through how to customize the quick link navigation bar according to your user needs and branding guidelines.

After this tutorial, you will be familiar with the CSS selectors required to customize the quicklink navigation bar of your mobile app.

• You have activated and configured a Quick Link Navigation Bar for your mobile app.
• You have the role of an administrator in the Staffbase Studio.

1. In the Studio, click the gear wheel to open the settings.

2. Under Customization, click Branding.
   The Branding page opens.

3. Under Custom Styling, click Adjust the styling of your app.
   The Custom Styling editor opens.

4. In the editor, copy and paste the CSS lines.

Copy To Clipboard
1#toolbar .toolbar-item{
2    background-color: #696969;
3    color: #fff; 
4}
5 
6#toolbar .toolbar-item .toolbar-item-title{
7    text-transform: uppercase;
8}
9
10#toolbar .toolbar-item.selected{
11    color: #fff;
12    background-color: #dd0000; 
13    font-weight: 600;
14}
15 
16#toolbar .toolbar-item.selected .toolbar-item-title{
17    font-weight: 600;
18}

5. Click Preview to test your CSS customizations.

6. Save the changes.

You have customized the quicklink navigation bar of your Staffbase app.

• Setting Up Custom Styling with CSS
• Available CSS Selectors