[Support request] Confusing top bar alignment with multiple widgets

[Zesen]

Hello Tom, I was informed by a client that the top bar implementation mechanism is a bit weird. Say, I got 6 Text Widgets in the top bar. If I select Center alignment, things are easy, it’s just:

=========== 1 2 3 4 5 6 ===========

If I choose Left, it’s:

1 3 5 =========== 6 4 2

Right:

2 4 6 =========== 1 3 5

It’s kinda inconsistent, and a bit confusing to explain to clients how it actually works. Is this by design? Another thing to mention, is there an option that can make the Top Bar invisible on mobile without custom css?

Thanks!

[Tom]

It was done this way to allow both sides of the top bar to contain widgets, without having to register multiple widget areas in the back-end.

They simply switch side to side using odd/even selectors in CSS. You can absolutely tweak it to however you like by adjusting the CSS.

Not without custom CSS (yet):

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

[Zesen]

I understand the implementation details, but it’s just not that intuitive to clients. See, we got:

1 3 5 =========== 6 4 2 for left,

and

2 4 6 =========== 1 3 5 for right.

It would make more sense to have:

1 3 5 =========== 2 4 6 for left isn’t it? and I believe the implementation would be even simpler: we add .top-bar-align-right to .top-bar if Left or Right Alignment is selected, then, if Left Alignment is selected, apply float: left; to the odd ones; if Right Alignment is selected, apply float: left; to the even ones.

The current implementation for the Right Alignment is the same as what I just described, but for the Left one, we add .top-bar-align-left to .top-bar and then apply float left to the odd ones and float right to the even ones, which then creates that reasonable-but-not-so-intuitive result of reverse ordering on the right side. I understand it wouldn’t be possible for you to adjust the core since it would break backward compatibility and ruin the design of existing sites, but is there a simple way for me to hack it to be what I prefer without touching the core?

edit:

just to share my solution. currently I have this custom css to achieve what I want. It’s based on utilizing selector with higher specificity to overwrite the default rules, not sure if it would affect anything else other than top bar itself?

<style>
.top-bar.top-bar-align-left {
    text-align: right;
}
.top-bar.top-bar-align-left .inside-top-bar>.widget:nth-child(even) {
    float: none;
}
</style>

[Zesen]

just a side-question: as GP premium users, is there a way to hide the GeneratePress link under Appearance for non-administrator users? we tend to offer our clients a less powerful, custom admin role instead.

[Tom]

I agree – it could be better. The way it currently works is the natural way display: inline-block; works when set to even/odd. Unfortunately at this point it would be hard to reverse, as we don’t want to re-order the way people have their widgets set up when they update.

As for your second question, the link should only display for users with the edit_theme_options capability, which is only administrators. We’ve added a filter to the link in the next version of GP, which will allow you to turn it off under more specific conditions.

Let me know if you need more info 🙂

[Author]

Posts