Navbar logo centered both horizontally and vertically?

[rosslaird]

I wonder if the vertically centered navbar logo could also be horizontally centered with the rest of the navbar. At the moment, if the logo is large enough to be a visual branding element, quite a bit of white space is created. Here's an example:

And here's an example of the kind of approach I have in mind, with the logo and menu items more horizontally centered, from The Atlantic (if not exactly centred, at least with less white space):

[rosslaird]

After some non-expert experimentation, it looks like this can be achieved in the following way:

1. Add align-items-center to the container div that contains navbar-brand:

<div class="container align-items-center>
<a class="navbar-brand" href="/">

2. Add the following to custom.scss:

.crx-navbar-center .navbar-brand img {
height: 135px;  /* desired logo height */
width: auto;  
margin-top: auto;  
margin-bottom: auto;  
}

3. Fine-tuning of the logo positioning can be achieved with:

 transform: translateY(50%); /* desired logo offset along the Y axis, i.e. vertically */

It looks like using transform in this way also makes step 1 unnecessary — but may have implications for responsiveness that I'm not seeing.

This solution appears to work but may not be the best solution. For me, it results in this:

[rosslaird]

The method I'm using does cause too much white space between the logo and the top of the page, so I adjusted the logo upward and changed the positioning of the menu and search bar as well:

.nav-item, form[role=search] {
  transform: translateY(-100%);
}

This gets me exactly what I'm looking for (on large screens). Now I just have to figure out a responsiveness rule to cancel out these adjustments on smaller screens. Something like:

@media (max-width: 768px) {
  .nav-item, form[role="search"] {
    /* Reset the transform for small screens */
    transform: translateY(0%);
  }
}

Making progress, though.

[vsalvino]

It's a nice-looking design, but probably not something we'd want to offer directly in CRX, as it could vary greatly from site-to-site based on the size and shape of the logo.

Theming has been on the backburner for quite a while (#44). Although this would be a prime candidate for something that should be handled in a theme, as it would require some custom HTML and CSS.

On every site we build, in practice we end up having to completely do a custom navbar. No surprise here that you're needing to also customize the navbar. The navbar in CRX needs re-thought because the designs vary so much from site-to-site, but we haven't really figured out what the ideal implementation is yet (#56)

[rosslaird]

I did look at the discussion about theming before diving into this experiment, and I can see how complex and unpredictable the implementation might be. For now, I'm fine with the solution I've come up with.