Why Use Header (Desktop) 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 Desktop Header options in BuddyBoss Theme 2.0. 

Configure Header (Desktop)

1. Before customizing the header, you must add the menu to display it in the header. Go to Appearance - Menus. From here click Create a New Menu and add some menu items into it. Then select the display location. In BuddyBoss 1.0, there is only one location- which displays the same menu for the both Logged In and Logged Out users. However, in BuddyBoss 1.0, we have separated the locations- one for the Logged In and another for the Logged Out users. You can select both of them as I have done here. If you refresh the frontend you will see the menus.

Here, you can also add the icons in every menu. BuddyBoss offers you modern Icon Packs for the users. 

Now navigate to the BuddyBoss - Theme Options - Header. There are 4 different layouts, select the first one and use the Standard Menu Style. Don’t forget to press the Save Changes button. 

Refresh your frontend and see just like the sample layout, the Logo and Menu bar is on the left side of the header. 

Let’s see how the Tab Bar Menu looks like. Turn on the Tap Bar and save the changes. 

Next refresh the frontend and see the tap bar menu. 

Want to check out the second header layout, click on the second one and Save Changes. 

Reload the frontend as the sample layout, here the menu is on the left side while the logo is on the middle. 

Why not see the third layout? 

It is the reverse version of the second layout. If you refresh the frontend you will see the logo is on the left and the menu bar is in the middle. You can use the search icon for finding anything in the community. 

But if you want to put the Search Bar in the middle, select the forth layout.

Reload your frontend to see the differences you wanted.

We have another style which is not in these header style options. You can replace the logo with the BuddyPannel. Go to the BuddyBoss - Theme Options - BuddyPannel section and turn on the Show Logo in BuddyPannel. 

After that, refresh the frontend, the logo will be in the BuddyPannel area. 

If you scroll down below, you will get the Components option, from here you can select or unselect the component to show in the desktop header. Let’s eliminate the Shopping Cart and Save Changes.  

Refresh the frontend and check there is no Shopping Cart option anymore. 

2. You can change your profile display. Right now it’s showing with the Name & Avatar. Let’s click on the Avatar Only and Save Changes button. You can turn off the profile dropdown as well. 

You watch the differences after refreshing the page. 

The dropdown of the user's profile can be looked a bit long, you have the authority to customize that. Go to Appearance - Menus. From there click Create a New Menu. 

Type the Menu Name and select the Profile Drop Down display location. 

Then add some menu items under BuddyBoss, I have selected Profile, Account, Timeline, and Log Out. Click Add to Menu button. 

If you click one of the menus, you will see the icon for each menu. Don’t forget to press the Save Menu button.

See the changes after reloading the web page.

3. In the Header section, there is an Advanced option. 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 frontend after refreshing the page.

From now on you can optimize the header of your website with our elegant BuddyBoss customization. 

Related Materials

Desktop Header in BuddyBoss Theme 2.0