BuddyPress.org

I’m trying to make some changes to a child theme based on the Buddypress default theme.

By default the WP Admin Bar is hidden below screen widths of 768px. I would like to reinstate it and have done so by adding the following to my theme:

#wpadminbar {
display: inline !important;
}

But responsive.css in the Buddypress default theme sets the following:

body {
margin-top: -28px !important;
}

This forces the header up underneath the wpadminbar when the screen is less than 768px wide. Because it is set as !important I cannot apply CSS to the body tag elsewhere that takes precedence over it.

Why is the theme coded in such a way that makes customising it so tricky?

My next attempt to make this work will be to add a 28px tall div at the top of the page only when the screen width is below 768px, but that’s an unsatisfying and clunky solution.