Upgrade navigation

📘

Note

The global navigation menu introduced in version 11.21 of Optimizely Content Management System (CMS) UI differs from how it worked before. The navigation menu was introduced for CMS, but other products and add-ons must opt-in to the menu. There is one exception: if you are using the default Bootstrapper directly, without wrapping it in your implementation, your add-on will follow the lead of the CMS UI and switch navigation.

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

Update the view

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

The 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.ApplyPlatformNavigation() to the container element for your content.

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

Check root font size

The navigation uses the rem unit for sizing, so if you change the root font size from the default (16px), it will be inconsistent with the navigation font size in CMS UI. If you use Bootstrap, Bootstrap 3 modifies the root font size, but Bootstrap 4 does not.

Update styles [Optional]

CMS UI has updated its styling to align with the navigation. If you use CMS UI classes, you may get some of the styling while using the old global menu. If you have your styling, you should update your styles to match the new menu.