Why Use Header (Mobile) in Your BuddyBoss Community?

The website header is the top area on each page of your website. It is known as Title Bar as well. This area displays your logo, primary navigation, and the profile dropdown to access your content. This tutorial will teach you how to configure the Mobile Header options in BuddyBoss Theme 2.0. 

Configure Header (Mobile)

1. We have configured the Desktop Header option before. Now let’s navigate to the BuddyBoss - Theme Options - Header. 

Scroll down to the mobile option and determine which component to display in your mobile header. From here I am disabling Search and Messages. Don’t forget to press the Save Changes button. 

Before refreshing the frontend make your screen tiny, it will show you the mobile device view. Now check the Search and Messages icons are no more there. 

You can also customize your mobile header logo. To do so go to BuddyBoss - Theme Options - Logo.

In the Mobile Logo section, you can turn off the logo for mobile header, upload or remove logo, and resize it according to your preferences. 

2. In the Header section, there is an Advanced option, it is applicable for both mobile and desktop. You can turn off the Sticky Header option. It sticks your headers to the top of the screen while scrolling. Also turn off the Header Shadow and resize the Header Height to 60. Lastly click the Save Changes button. 

Check your mobile frontend after refreshing the page.

In general, the menu bar automatically attaches to the mobile header panel. Just like this- 

Instead you can create a custom menu in one of the mobile locations- one for the Logged In and another for the Logged Out users. In BuddyBoss 2.0 we have provided these two menu locations. Go to Appearance - Menus, click Create a New Menu. 

Type the Menu Name as Mobile Menu and select the Mobile Menu- Logged In for display location. 

Now, under BuddyBoss, add menu items such as- Profile, Account, Groups, Forums, and Log Out. Click Add to Menu to add them in your desired place and don’t miss out pressing the Save Menu, otherwise the changes won’t work out in the frontend. 

Next refresh the frontend and click on the left to see how it looks. 

3. Let’s open up the new area called BuddyPannel Section. Press the Add Section button twice. You are allowed to add more sections for the convenience of your users. There will be two sections named Get Started. 

Here you will have the drag & drop option to place the sections. 

Click and rename them. Just like I have named Personal and Settings. Lastly, press the Save Menu button. 

Reload the frontend and check out the sections we have just created now. 

Your mobile header panel will look stunning if you can utilize the customization of BuddyBoss Mobile Header. 

Related Materials

Mobile Header in BuddyBoss Theme 2.0