Change Log

Features and Improvements

• Implements year 2017 layout with flat header (all in one row) and navigation mega-layers.

Bug Fixes

• Comment blocks are now properly stripped again from the minified JavaScript file.

Features and Improvements

• The layout of the menu overlay has been condensed a bit on small displays to allow for more navigation entries before scrolling becomes necessary.

Features and Improvements

• Reduced the whitespace within the navigation tabs a bit on lap-sized devices showing the tab navigation to accommodate an additional entry in the navigation.

Features and Improvements

• The account tab has been moved from the bottom bar to the top bar to make space for more navigation entries.
• Positioning in the white header section is now handled via the new page-header__content class. (See the new Brand Header markup demo.)
• The large layers have been removed in favor of the small ones.
• The following classes have been made obsolete by the recent changes to the account tab layout and have been removed.
  1. topnavigation__hover-tabs__label--reduced
  2. topnavigation__sso-login__tab-decorator
  3. topnavigation__hover-tabs--small-layers
  4. topnavigation__hover-tabs--large-layers

Features and Improvements

• The tab navigation has had a redesign. The orange surface has given way to a more subtle white background to avoid diverting too much of the user's focus from the actual page content.

Features and Improvements

• The user image container has been moved slightly closer to the account tab label on small displays to better convey that the two belong together.

Bug Fixes

• Changes reporting of clicks on the account tab and overlay triggers. Reporting is no longer done by native Tealium handlers, but handled manually from within the top navigation JS, which reads the reporting configuration from data attributes on the trigger element.

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/.