Bulma: New navbar: there is no centering anymore

[jesprider]

Overview of the problem

This is about the Bulma CSS framework

Description

It seems like the new navbar doesn't have a way to center some content (a logo mostly).
Trying to make it compatible with the older approach breaks things for the smaller viewports and simply makes code ugly.
This basically kills all the benefits from the new version of the navbar in my opinion.

Question

Since the topic of centering something in a header is quite popular, do you think it makes sense to add this possibility from the box?

P.S.: I really like the new version of navbar, that's why I'd like to raise this problem and to discuss what others think about it.

[jgthms]

Nav center was causing way too many issues: #760 #751 #739 #725 #649

The reason is that for nav-center to work, it required nav-left and nav-right to have flex-basis: 0, so that they had an equal width. As a result, none of them could actually be wider than 50%. It would then either display a scrollbar, or simply hide what's overflowing.

Nav center was simply a bad feature that had too many unintended consequences.

[jesprider]

Thank you for the answer, @jgthms . I see the point.

Nevertheless I think that when using centering in the header, developers should be ready for some limitations. That's why I believe that not every of mentioned issues are valid.

And I don't think that center was a bad feature. But it's definitely hard to implement it in a solid way. Also you probably know better of how often centering feature has been used, so I believe the new way of doing that is reasonable. I'll try to find a way how to make it compatible with the framework and will be not so messy :)

[pikeas]

Just bit by this. I'd like to center elements in my navbar drop-downs, and am having trouble figuring out how to do so.

[Michael-D-Pine]

Late to the party, doing a review of bulma at the moment and as ugly and as disgusting as it is, the company I work want a logo in the center of the Navbar, so painful.

If this is a requested feature I would like something that could make it happen, but I do understand how difficult it is, for now I will probably just use some artificial spacing on navbar-start to make the application logo appear close to center as possible, company logo is nicely (leftist), I mean it will be hidden on smaller devices anyway.

It is a small thing in the grand scheme of things but would be nice to have.

Loving the framework so far after coming from bootstrap.

thanks
Michael

[windmaomao]

I have a requirement for that as well.

I was thinking that if I can't nail it with Bulma, then I'll just do another fix top thing on the top of the screen and center align it in the middle.

But of course I was still hoping to use Bulma natively. So seems to me I can add another navbar item after logo.

  < a class="navbar-item>Table of Content</a>

And then you can change the flex property of this item to

  .navbar-item {
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
  }

[jesprider]

My solution for the centering was:

    .navbar-item.is-logo
        position: absolute
        left: 50%
        margin-left: -63px // 50% in my case
        height: 100%
        display: flex
        align-items: center