Customize the Mobile Menu

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.

After this tutorial, you will be familiar with the CSS selectors required to customize the mobile menu of 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 snippet.

Copy To Clipboard
1/* =============================================================================
2= MENU (SIDEBAR) ===============================================================
3================================================================================ */
4 
5.mobile #sidebar{
6    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
7    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
8    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
9    background-color: #fff;
10    border-right: 1px solid #eeeeee;
11}
12 
13.clientapp.mobile.loggedout #sidebar .plugin-list>.search-widget{
14    background: #ffffff;
15    color: #000000;
16}
17 
18.mobile #sidebar .profile-header{
19    background: #ffffff;
20    color: #000000;
21}
22 
23.ios #wrapper{
24    border-right: 1px solid #eeeeee;
25    -webkit-box-shadow: none;
26    -moz-box-shadow: none;
27    -ms-box-shadow: none;
28    box-shadow: none;
29}
30 
31.mobile #sidebar .plugin-list{
32    background: #F5F5F5;
33    color: #000000;
34}
35 
36.mobile #sidebar .plugin-list>.item:first-of-type{
37    margin-top: 10px;  
38}
39  
40.retina.mobile #sidebar .channel-list,
41.mobile #sidebar .channel-list:not(.loading){
42    background-color: #ffffff;
43}
44
45.retina.mobile #sidebar .plugin-list>.item:not(:first-of-type), 
46.retina.mobile #sidebar .plugin-list>.item,
47.mobile #sidebar .plugin-list>.item,
48.retina.mobile #sidebar .channel-list{
49    margin: 10px 15px;
50    background: #fff;
51    border-radius: 8px;
52    box-shadow: 0px 2px 4px rgba(30, 31, 31, 0.05);
53}
54
55.mobile #sidebar .plugin-list>.item:not(:first-of-type){
56    border: 0 !important; 
57}
58
59.retina.mobile #sidebar .channel-list .item+.item,
60.mobile #sidebar .channel-list .item+.item,
61.retina.mobile #sidebar .channel-list,
62.mobile #sidebar .channel-list,
63.mobile #sidebar .channel-list .item{
64    background: #fff;
65    border: 0;
66    box-shadow: 0;
67}
68
69#sidebar .channel-list .item:before,
70.ios #sidebar .channel-list .item:before{
71    background-color: #000000;
72    top: 20px;
73}
74 
75.mobile.touch #sidebar .channel-list .item.active,
76.mobile.touch #sidebar .plugin-list>.item.active,
77.mobile.touch #sidebar .actor.active,
78.mobile.touch #sidebar .profile-header .item.active, .mobile.touch #sidebar>.menu-list .item.active{
79   background-color: #eeeeee;
80}
81 
82.mobile #sidebar .plugin-list:first-child>.search-widget,
83.mobile.loggedout #sidebar .plugin-list>.search-widget{
84    padding-bottom: 15px;
85    padding-top: 15px
86}
87
88.mobile #sidebar .item>.icon, 
89.mobile #sidebar .item>.image, 
90.mobile #sidebar .item>.we-icon{
91    color: #4658F7;
92}
93 
94/* SIDEBAR HEADER ==================================================================== */
95
96.mobile #sidebar .profile-header .actor{
97    background: #fff;
98}
99 
100.mobile #sidebar .plugin-list>.search-widget{
101    background: #eeeeee;
102}
103 
104.mobile #sidebar .plugin-list>.search-widget .search-wrap span.we-icon.search{
105    top: 15px;
106}
107 
108.mobile .no-header .plugin-list.scroller form input::placeholder{
109    color: #333; 
110}
111 
112.mobile #sidebar .plugin-list>.search-widget .search-wrap input{
113    background-color: #fff;
114    border: none;
115    border-radius: 5px;
116    height: 45px;
117    -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
118    -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
119    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);  
120}
121 
122.mobile #sidebar .plugin-list:first-child>.search-widget,
123.mobile.loggedout #sidebar .plugin-list>.search-widget{
124    padding-bottom: 15px;
125    padding-top: 15px;
126}
127
128.mobile .no-header .plugin-list.scroller form{
129    height: 50px;
130    box-shadow: 0px 2px 4px rgb(30 31 31 / 4%); 
131    border-radius: 8px;   
132}
133
134.mobile .no-header .plugin-list.scroller form .we-icon{
135    line-height: 45px; 
136}
137
138.mobile .no-header .plugin-list.scroller > div > div {
139    background: #E2E2E4 ;
140    padding: 15px;
141    margin-bottom: 20px; 
142}

5. Click Preview to test your CSS customizations.

6. Save the changes.

You have customized the mobile menu of your Staffbase app.

• Setting Up Custom Styling with CSS
• Available CSS Selectors