1.1.0 navbar alignment
Hi, thanks for missing.style!
I seem to have a regression between 1.0.9 and 1.1.0 with the following markup:
<header class="navbar">
<div>
<a href="/" class="allcaps">
Reactor⚡
</a>
</div>
<nav aria-label="Dashboard sections">
<ul role="list">
<li>
<a href="/climate/">
Climate
</a>
</li>
<li>
<a href="/energy/">
Energy
</a>
</li>
<li>
<a href="/system/logs/">
System
</a>
</li>
</ul>
</nav>
</header>
On 1.0.9 it looks like this:
On 1.1.0 it looks like this:
(in other words, the navbar is now right-aligned rather than centred).
I can't reproduce on the latest version, can you check if it's been fixed?
@dz4k still the same for me on 1.1.1. Is there anything I can do to help debug?
@j4mie could you make a minimal reproduction on CodePen or somewhere similar?
have the same problem with 1.1.1 - but only of Firefox, on Edge it's centered.
it seems that under edge following style is applyied to last child of nav:
But on firefox - it's not applied.
Hopefully I've done this right: https://codepen.io/j4miem/pen/ExMePqK
Agreed with @graf0 that it seems to be Firefox-specific issue. Works fine in Chrome and Safari.
Does anyone know a workaround for this? I thought it was default behavior since I use Firefox, spent a while trying to fix it. The issue appears after upgrading from 1.0.13 to 1.1.0.
Does anyone know a workaround for this? I thought it was default behavior since I use Firefox, spent a while trying to fix it.
The issue appears after upgrading from 1.0.13 to 1.1.0.
Try to add margin-right:auto to last element in navbar
this was an artifact of our compiler being too overzealous with backcompat and replacing modern css with stuff that doesn't work. should be fixed in 1.1.2 (releasing soon)
❤️ thank you!