How I Made My Header/Menu Fixed/Sticky

[James]

I just want to share how we made our BuddyBoss 4.0 header fixed (or “sticky”) so that the main menu remains on screen all the time for desktop users. Maybe this will be helpful to others. I’m not support or associated with BuddyBoss – I’m just a BuddyPress admin that relies on BuddyBoss products.

1. We use a very well supported FREE plugin called Sticky Menu: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/ – the developer, Mark, is great.

2. We use the full-width toolbar option in BuddyBoss theme customization settings. However, BB 4.0 users will know that until the member is logged into the site, the toolbar isn’t present across the top of your page yet. This can create a “fiddly” situation as you configure your sticky menu, but you can definitely work through it with experimentation, trial and error. It all boils down to the settings in item #3 below.

3. If you’re starting with a standard BuddyBoss 4.0 header/menu layout, and you install Sticky Menu, you’ll need to indicate some settings in the plugin. I’ll share mine, but you will have to tinker with these based on the size of your logo and height of your #masthead:

Sticky Element: .logged-in #masthead (limits “sticky” to logged in users)
Space between top of page and sticky element: -23
Z-index: 100

Because we use the full-width toolbar for logged in users, we don’t use the Sticky Menu for non-logged-in users, hence the reference to “.logged-in #masthead” This has to do with matching the “Space between top of page…” setting to the pixel height of the toolbar, the header/logo area, and how you want the menu to “stick” on scrolling. This is a bit difficult to describe, but if you install the plugin and begin experimenting with the “Space between…” setting, you will quickly catch on.

4. In our case, we wanted our main menu to remain sticky, but allow the logo/header area to “vanish” or “collapse” when the site member scrolls the page. I’ll try to illustrate this with my screen grabs attached.

5. Our end result is that a non-logged-in user does not have a sticky menu. (In our case, we don’t really care… our site is for members and any non-member content exists solely to attract visitors to membership.) By virtue of the “Sticky Element” setting above in #3, a logged-in user obtains the sticky menu. By virtue of our -23 pixel spacing, the logged-in member scrolls down the page and the logo/header area “collapses” leaving the full-width toolbar, then the main menu underneath. If the member scrolls back to the top of the page, the full logo/header area expands nicely again. Pretty slick.

Your z-index might need adjusted depending on any other customization to your masthead/header area. This setting ensures that page elements don’t weirdly overlap your window when users scroll. I know for example that the z-index of RTMedia objects can conflict – so you either adjust your Z-index or dump RTMedia and get a lean media plugin like BuddyBoss Media 😉

If you don’t use the full-width toolbar, your settings will likely be different than mine in step #3, and I can’t even be certain that this method will work for you, but I think it’s worth a try if you need a sticky menu, and I do expect it to work. If you run into issues, use the plugin’s support area on WordPress.org

Attaching screen grabs! Hope this helps someone.

James

[Alyssa]

Thanks for sharing James!