In version 11.21 of Optimizely Content Management System (CMS) UI, the global navigation menu differs from how it worked before.
The new navigation menu was introduced for CMS, but other products and add-ons will need to opt-in to the new menu. There is one exception: if you are using the default Bootstrapper directly, without wrapping it in your own implementation, your add-on will follow the lead of the CMS UI and switch to the new navigation.
If you are implementing the navigation for the first time instead of upgrading, see Adding and configuring menu items.
The first step is to replace the old navigation with the new one in your view. Switch
@Html.Raw(Html.GlobalMenu()) out for
The new navigation has a fixed position so that it will always be visible, even when scrolling. In order to prevent your content from ending up behind the navigation, you will need to add
@Html.Raw(Html.ApplyPlatformNavigation()) to the container element for your content.
@Html.Raw(Html.CreatePlatformNavigationMenu()) <div @Html.Raw(Html.ApplyFullscreenPlatformNavigation())> <!-- Content --> </div>
The new navigation uses the rem unit for sizing, so if you are changing the root font size from the default (16px), it will be inconsistent with the navigation font size in CMS UI. If you are using Bootstrap, Bootstrap 3 modifies the root font size, but Bootstrap 4 does not.
CMS UI has updated its styling to be more closely aligned with the new navigation. If you are using CMS UI classes, you may get some of the new styling while using the old global menu. If you have your own styling, we suggest updating your styles to match the new menu.
Updated 5 days ago