UIkit 3.17 – Transparent Sticky Navbar, Masonry Grid and Parallax Grid
Today we are happy to introduce UIkit 3.17. It comes with some nice refinements for transparent and sticky navbars, additional options for the masonry and parallax grids and more. Let's check it out.
Transparent Navbar with Dropbars
Transparent navbars are a common design element for more artistic websites. But how should transparency behave when the dropbar opens and stretches to the full width of the viewport? Keeping the navbar transparent is not really an option because you can see the background image or video underneath, which doesn't look good. This is why we added the
dropbar-transparent-mode option for the transparent navbar when used with a dropbar.
To remove navbar transparency when the dropbar opens and add it when the dropbar closes, set
dropbar-transparent-mode: remove. This is useful, for example, if the navbar is only transparent in the hero section, but not when sticky.
Alternatively, if the navbar is transparent even when sticky, set
dropbar-transparent-mode: behind to open the dropbar behind the navbar, so it is no longer transparent. The navbar content will show above the dropbar background. If you need to inverse the color of the navbar content to better fit the dropbar background, set the Less variable
@navbar-dropbar-behind-color-mode to either
When using a sticky transparent navbar, it's quite common to blend it with the page background. In this case, you need to place the dropbar outside of the blending element using
dropbar-anchor, and the dropdowns using
container, both with the corresponding CSS selectors. Otherwise, the dropbar and dropdowns would also blend with the page background. This also means the dropbar will be placed outside of the sticky container. As a result, only the navbar will stay sticky, and the opened dropbar will scroll out of the view. This is why we added a new
close-on-scroll option to close the dropbar before scrolling.
Transparent Navbars and Sections
The Section component now defines the
--uk-navbar-color custom property in the UIkit CSS. Depending on the section background, it is set to either light or dark. If the transparent navbar intersects with a section, it automatically sets the corresponding
.uk-dark class to adjust the navbar color. A sticky transparent navbar will automatically change its color depending on the section beneath.
Scroll Offset for Navbar
The Scroll component now automatically adds the height of a sticky element, for example the sticky navbar, as offset to the scroll target so it is not covered by the sticky element. If there is already an offset for a sticky element, the
offset option is added up. This means that you no longer have to set the offset option to prevent the navbar from covering the scroll target.
The Grid component now has a new masonry
pack mode which will sort items into columns with the most room. To keep backward compatibility, setting masonry to
true, will just use the new
pack mode. To show items in their natural order, as before, use the
As you know, the Grid component has a parallax option to move single grid columns at different speeds while scrolling. Similar to the Parallax component, we added
parallax-end options to give you more control over the duration of the parallax animation. By default, the animation starts when the top border of the element enters the viewport, and ends when its bottom border leaves the viewport.
With the new options you can offset the start and end points. Values can be set in any dimension units, namely
% unit relates to the element's height. Both options allow basic mathematics operands,
Additionally, there is a new option to justify the grid parallax if columns have different heights, which is often the case for masonry grids. You can now set
parallax-justify: true so all grid columns reach the bottom at the same time. Set
parallax: 0 to only move the columns by their height until they justify. Of course, you can add an additional parallax translation value as well.
Additionally, we added an extra style to the Heading component. This 3XLarge modifier now provides an even bigger font-size for headlines which may come in handy for hero sections.
Migration to UIkit 3.17
As mentioned above, there are breaking changes for the Scroll and Grid components. So please take a look at the migration guide.
We are really happy with all the changes for the transparent navbar. Now you can finally combine it with dropbars, and it will look good. And thanks to refined masonry grid, the items will align more evenly without too much space at the bottom. You can even animate them when scrolling, so they completely justify at the bottom. Now it is your turn to share your feedback, so let us know what you think about this release in the comments below.