Change Log

Bug Fixes

• The CSS state classes open and close have been given more specific names to avoid conflicts with insufficiently specific selectors in other applications' custom CSS.

Features and Improvements

• The overlay variant of the navigation now shows the user image on the account tab to get a more consistent experience across devices.
• The contents of the account tab have been reordered to get important elements to the top while keeping less important ones in the bottom.
• The layout of the account tab has been improved to get a better distinction between product and account links.
• The topnavigation-overlay-touch-area class was introduced to improve the layout of the account tab link list for touch interfaces.

Features and Improvements

• Accelerates fade effect of account and navigation overlay.

Bug Fixes

• The menu overlay will now work in headers without an account tab.

Features and Improvements

• A separator has been added between the menu and account triggers in the overlay navigation. It should now be easier to distinguish them as separate triggers.
• The account tab in the overlay navigation is now properly centered, regardless of content (see the code example at topnavigation__overlay-trigger--account for details).
• The account tab now always shows two lines. Users who are not yet logged in will now see “Anmelden” above the tab label.

Bug Fixes

• The modifier topnavigation__no-burger has been renamed to topnavigation--no-burger to keep with proper BEM semantics.
• The company logo in the menu overlay will no longer jump horizontally when using certain versions of the Core CSS. To accomplish this, the topnavigation__overlay--menu__logo needs to be wrapped in a content-wrapper element with the additional content-wrapper--topnavigation-overlay class.

Markup Changes

• The burger element is now called topnavigation__burger to avoid potential conflicts with other elements on the page.

Bug Fixes

• The media-query-less version of the CSS now includes the changes introduced in v1.0.0.

Features and Improvements

• The top navigation has gotten a major redesign on small devices.
• The interaction on small devices now involves overlays rather than slide-in menues.
• In the tab navigation, layers will no longer open on mouse hover. The corresponding tabs now need to be explicitly clicked.

Breaking Changes

This is a major release and as such introduces a couple of non-backwards-compatible changes to the header markup.

• The classes topnavigation__slide-in-trigger--left and topnavigation__slide-in-trigger--right are obsolete.
• The account tab and menu triggers now use the topnavigation__overlay-trigger--account and topnavigation__overlay-trigger--menu classes, respectively.
• The menu trigger now contains a burger element rather than a FontAwesome icon.
• The account and menu lists must now be wrapped in the new topnavigation__overlay--account and topnavigation__overlay--menu wrappers, respectively.
• The menu wrapper includes the new topnavigation__overlay--menu__logo image element.
• The structure of the account tab link lists has been slightly adjusted.

Please refer to the demo snippets (particularly the sample markup) for more detailed information.

Bug Fixes

• A regression introduced in v0.6.3 caused the opened account tab layer to be overlapped by other content with an elevated z-index. This has been fixed.

Bug Fixes

• The account tab had its z-index decreased to prevent it from showing through elements that are placed on top of the navigation, such as advertisements.

Features and Improvements

• A layout fix for delayed hover tabs was resulting in cut off content in certain home-made versions of the header. The related rule has been made more specific to apply only to inactive layers.

Bug Fixes

• The login and logout links in the account tab are properly toggled again based on the user's login status.

Features and Improvements

• The whole area of the navigation tabs can now be clicked and hovered.
• The account tab may now also be shown as active.

API Changes

• The user image is no longer a sibling of the account tab label, but its descendant.
• Also, a new wrapper element has been introduced for the label text in the account tab.

Please refer to the tab structure documentation for details.

Bug Fixes

• On touch devices, tapping on the user image while the tab navigation is active will now correctly open the account tab instead of immediately following the link.

Bug Fixes

• Using the reduced account tab no longer causes its label to disappear in display sizes where it should really be shown.

Bug Fixes

• The decorator icon on the account tab is now properly shown/hidden based on what navigation type is active.

Features and Improvements

• Small layers may now be aligned dynamically, based on display size, with the topnavigation__hover-tabs--self-aligned module.
• The account tab can now be displayed without a label to make space for more navigation tabs.

Features and Improvements

• The CSS rules for opening the slide-in navigation are now slightly more competitive to allow for competing slide-in effects defined later on.
• Small layers may now be aligned to the left or the right edge of the tab.

Bug Fixes

• The banners of the no-media-queries CSS files now show the proper version number.
• Fixed a bug where the slide-in triggers would be wrongly positioned in certain page contexts.

Features and Improvements

• There is now a version of the CSS for browsers without support for media queries.

Bug Fixes

• The top navigation container now forces the proper standard font styles to prevent layout bugs in environments using older versions of the Core framework.

Bug Fixes

• The layout of list items in the slide-in navigation has been corrected.
• Tabs with the active class are now properly colored when hovered.

Bug Fixes

• Moved fallback styles for legacy selectors around to fix an issue with specificity.
• Wrapped some styles related to large hover layers in the appropriate selector to avoid conflicts in small layers.

Features and Improvements

• Added topnavigation__hover-tabs--small-layers and topnavigation__hover-tabs--large-layers to configure the size of hover layers.
• Added topnavigation__hover-layer--right-aligned to make small layers open to the left rather than to the right.
• Added the topnavigation__hover-layer__link-block class for link lists in large layers.

API Changes

• The navigation wrapper selector has changed from top-navigation-slide-in-container to topnavigation-slide-in-container. The old selector is deprecated, but will continue to be supported.
• Tab lists (topnavigation__hover-tabs) must now explicitly specify a layer size via topnavigation__hover-tabs--small-layers or topnavigation__hover-tabs--large-layers.
• The login hover layer now also needs a topnavigation__hover-layer__navigation-wrapper wrapper to get the proper internal spacing. The login lists no longer get their own spacing.
• The link blocks in large layers now require the topnavigation__hover-layer__link-block class to receive the appropriate layout. These styles used to be bound to the topnavigation__level--3 class.
• The following classes have been renamed for the sake of the separation of concerns:
  • topnavigation__level--2__navigation-wrapper is now topnavigation__hover-layer__navigation-wrapper
  • topnavigation__level--2__teaser-wrapper is now topnavigation__hover-layer__teaser-wrapper
  • topnavigation__level--2__teaser is now topnavigation__hover-layer__teaser

Bug Fixes

• Corrected a bunch of faulty class name references in the documentation.

Features and Improvements

• Added info on CSS and JS dependencies to the documentation.
• Added this change log.

Bug Fixes

• Renamed the main documentation page to make sure that it will be accessible at /documentation/html/.