Customize the Mobile Menu

Learn how to customize the mobile menu of 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 mobile menu is vital in providing ease of navigation. In this tutorial, we take you through how to customize the mobile menu according to your user needs and branding guidelines.

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 the role of an administrator in the Staffbase Studio.

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

  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.

/* =============================================================================
= MENU LIST PAGE ===============================================================
================================================================================ */


.mobile-menu-list-page .bg-nav-appintranet {
    background-color: #974fe1;
}


.mobile-menu-list-page .\!bg-neutral-base{
    background-color: #ebddf9 !important;
}


.mobile-menu-list-page .we-icon{
    color: #974fe1;
}
  1. Click Save.

You have customized the mobile menu of your Staffbase App.

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

  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.

/* =============================================================================
= MENU (SIDEBAR) ===============================================================
================================================================================ */


.mobile #sidebar{
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
    background-color: #fff;
    border-right: 1px solid #eeeeee;
}


.clientapp.mobile.loggedout #sidebar .plugin-list>.search-widget{
    background: #ffffff;
    color: #000000;
}


.mobile #sidebar .profile-header{
    background: #ffffff;
    color: #000000;
}


.ios #wrapper{
    border-right: 1px solid #eeeeee;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}


.mobile #sidebar .plugin-list{
    background: #F5F5F5;
    color: #000000;
}


.mobile #sidebar .plugin-list>.item:first-of-type{
    margin-top: 10px;
}


.retina.mobile #sidebar .channel-list,
.mobile #sidebar .channel-list:not(.loading){
    background-color: #ffffff;
}


.retina.mobile #sidebar .plugin-list>.item:not(:first-of-type),
.retina.mobile #sidebar .plugin-list>.item,
.mobile #sidebar .plugin-list>.item,
.retina.mobile #sidebar .channel-list{
    margin: 10px 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(30, 31, 31, 0.05);
}


.mobile #sidebar .plugin-list>.item:not(:first-of-type){
    border: 0 !important;
}


.retina.mobile #sidebar .channel-list .item+.item,
.mobile #sidebar .channel-list .item+.item,
.retina.mobile #sidebar .channel-list,
.mobile #sidebar .channel-list,
.mobile #sidebar .channel-list .item{
    background: #fff;
    border: 0;
    box-shadow: 0;
}


#sidebar .channel-list .item:before,
.ios #sidebar .channel-list .item:before{
    background-color: #000000;
    top: 20px;
}


.mobile.touch #sidebar .channel-list .item.active,
.mobile.touch #sidebar .plugin-list>.item.active,
.mobile.touch #sidebar .actor.active,
.mobile.touch #sidebar .profile-header .item.active, .mobile.touch #sidebar>.menu-list .item.active{
background-color: #eeeeee;
}


.mobile #sidebar .plugin-list:first-child>.search-widget,
.mobile.loggedout #sidebar .plugin-list>.search-widget{
    padding-bottom: 15px;
    padding-top: 15px
}


.mobile #sidebar .item>.icon,
.mobile #sidebar .item>.image,
.mobile #sidebar .item>.we-icon{
    color: #4658F7;
}


/* SIDEBAR HEADER ==================================================================== */


.mobile #sidebar .profile-header .actor{
    background: #fff;
}


.mobile #sidebar .plugin-list>.search-widget{
    background: #eeeeee;
}


.mobile #sidebar .plugin-list>.search-widget .search-wrap span.we-icon.search{
    top: 15px;
}


.mobile .no-header .plugin-list.scroller form input::placeholder{
    color: #333;
}


.mobile #sidebar .plugin-list>.search-widget .search-wrap input{
    background-color: #fff;
    border: none;
    border-radius: 5px;
    height: 45px;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
}


.mobile #sidebar .plugin-list:first-child>.search-widget,
.mobile.loggedout #sidebar .plugin-list>.search-widget{
    padding-bottom: 15px;
    padding-top: 15px;
}


.mobile .no-header .plugin-list.scroller form{
    height: 50px;
    box-shadow: 0px 2px 4px rgb(30 31 31 / 4%);
    border-radius: 8px;
}


.mobile .no-header .plugin-list.scroller form .we-icon{
    line-height: 45px;
}


.mobile .no-header .plugin-list.scroller > div > div {
    background: #E2E2E4 ;
    padding: 15px;
    margin-bottom: 20px;
}
  1. Click Save.

You have customized the mobile menu of your Staffbase app.