Customize the Bottom Navigation Bar for Mobile Apps

Learn how to customize the bottom navigation bar on your mobile apps with the help of custom CSS.

Employee App
Staffbase Intranet

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.

Using custom CSS can result in undesired formatting or styling. Use custom CSS only if you have experience working with CSS, and always double-check what your app looks like after applying your styles.

  • 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, navigate to Settings > App and Intranet.

  2. Under Custom CSS, click and hold Show Editor until the editor opens.

  3. In the editor, copy and paste the CSS snippet.

#toolbar .toolbar-item{
    background-color: #696969;
    color: #fff;
}


#toolbar .toolbar-item .toolbar-item-title{
    text-transform: uppercase;
}


#toolbar .toolbar-item.selected{
    color: #fff;
    background-color: #dd0000;
    font-weight: 600;
}


#toolbar .toolbar-item.selected .toolbar-item-title{
    font-weight: 600;
}
  1. Click Save.

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