BuddyPress WP Bar

[David]

Hi there,

I’m trying to achieve one of the following (preferable the first one, but I understand it could be more complicated)

– Is there a way to move the “Howdy, (username here)” and BuddyPress notification bubble onto the GeneratePress menu bar instead? I’ve setup GeneratePress to look perfect for my site (a BuddyPress social site). However, the WP bar just doesn’t look good.

– If that’s not possible, is there a way to at least move the WP bar below the GeneratePress menu and make the WP bar the same width and colour as the menu?

Thanks in advance!

[Tom]

Hi there,

I’m afraid I don’t know enough about BuddyPress to know whether it’s possible to move the message/notification bubble. You’d have to ask them whether it’s possible to hook them in somewhere else.

As for the WP bar, are we talking about the standard black WordPress admin bar at the top of the site? You’re wanting to move this below the navigation and change the colors etc..?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hey Tom,

Ah okay, I figured.

And in terms of the WP bar, yes I am referring to the standard black WP admin bar at the top of the site. I already figured out how to change the colour of it and make it sticky by using some CSS. However, I’d like to have that WP bar show below the GeneratePress menu bar (which I set to become the header). I’d also like the WP bar to be the same width as the GeneratePress header menu as well.

[Tom]

I just dug through the core WordPress code for the admin bar hoping to find a way to unhook the current position and move it somewhere else, but I came up empty.

You may want to ask over on this site: https://wordpress.stackexchange.com/

Basically, we need to unhook the bar from the current position and hook it into a different action.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hi Tom,

I posted there and got this response,

“ The admin bar is hooked to wp_footer. So …

remove_action( ‘wp_footer’, ‘wp_admin_bar_render’, 0 );

… will remove it from there. And then you can register it for a custom hook with:

add_action( ‘my_custom_hook’, ‘wp_admin_bar_render’, 1000 );

You still have to overwrite the CSS in your stylesheet, but that should be fairly simple.”

https://wordpress.stackexchange.com/questions/359466/move-wp-admin-bar

Where do we go from here?

Thank you.

[Tom]

Awesome, try this:

remove_action( 'wp_footer', 'wp_admin_bar_render', 0 );
add_action( 'generate_after_header', 'wp_admin_bar_render', 20 );

Once you do that, can you link me to your website so I can help with the CSS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

I have the Code Snippets plugin. I added it there. And it didn’t do anything. Also tried adding it to the functions.php file, still nothing. Is that where I’m supposed to add it?

I can provide you with my site’s URL, but it’s a members only site so I will need to make credentials. Where can I privately provide you with that info?

[Tom]

You can send them here: https://generatepress.com/contact

As a guess, you can try this CSS:

#wpadminbar {
    position: static;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Okay, we’re incredibly close. The WP bar is now where it’s supposed to be. I had to slightly adjust the max-width a bit, but now it lines up perfectly.

The issue I’m having now is that there’s a gap from where the WP bar used to be (above the header). How can I move everything up so the header is essentially touching the top of the page like before?

And how can I make the WP bar sticky like the GeneratePress header / menu? Before I had the WP bar set to position: fixed; in the CSS, but that doesn’t work in this scenario.

[David]

Not sure if this would be any easier.. but how about making the WP Admin bar the same width as the GeneratePress header?

[Tom]

Try this:

html {
    margin-top: 0 !important;
}

You should be able to adjust the width to whatever you like by adjusting the max-width property.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts