Upgrade navigation

The global navigation menu in Optimizely Content Management System (CMS) UI version 11.21 differs from how it worked before.

Optimizely introduced the new navigation menu for CMS, but other products and add-ons must opt-in to the new menu. However, 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 navigation

If you implement the navigation for the first time instead of upgrading, see Add and configure menu items.

Update the view

Replace the old navigation with the new one in your view. Switch @Html.Raw(Html.GlobalMenu()) for @Html.Raw(Html.CreatePlatformNavigationMenu())

The new navigation has a fixed position to be visible, even when scrolling. 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>

Check root font size

The new navigation uses the rem unit for sizing, so changing the root font size from the default (16px) is 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 align more closely with the new navigation. If you use CMS UI classes, you may get some new styling while using the old global menu. If you have your styling, you should update your styles to match the new menu.