HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Upgrade navigation

Highlights Optimizely Content Management System (CMS) user interface differences before and after version 11.21 and gives examples of what to do in each case.

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.

Switch to the new navigation

If you are implementing the navigation for the first time instead of upgrading, see Adding and configuring menu items.

Update the view

The first step is to replace the old navigation with the new one in your view. Switch @Html.Raw(Html.GlobalMenu()) out for @Html.Raw(Html.CreatePlatformNavigationMenu())

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.

    <div @Html.Raw(Html.ApplyFullscreenPlatformNavigation())>
        <!-- Content -->

Check root font size

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.

Update styles [Optional]

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.