CSS Overrides Migration for the Navigation Menu

If you plan to continue using custom CSS overrides, migrate them forward after you update the template.

This topic identifies selector changes for the Navigation Menu.

note: - Use custom CSS sparingly since template updates don’t always support customizations.

Custom CSS is now shared across all your site pages. If you used custom CSS for Login pages, copy it and close the CSS editor. Then navigate to a non-Login page, reopen the editor, and add the custom CSS.

Full Navigation Menu

<col> </col> <col> </col> <thead> <tr> <th> Previous Selector </th> <th> New Selector </th> </tr> </thead> <tbody> <tr> <td> <p> <code>.forceCommunityNavigationMenu</code> </p> <p> <code>.forceCommunityNavigationMenu #navigationMenu</code> </p> <p> <code>.forceCommunityNavigationMenu .navigationMenu</code> </p> <p> <code>.forceCommunityNavigationMenu .navigationMenuWrapper</code> </p> </td> <td> <code>.comm-navigation</code> </td> </tr> </tbody> </table></sfdocstbl>

Mobile Menu Curtain

Previous Selector	New Selector
`.forceCommunityNavigationMenu .navigationMenuWrapperCurtain`	`.comm-navigation nav.slds-is-fixed`

Home Menu Item

Previous Selector	New Selector
`.forceCommunityNavigationMenu .homeLink` `.forceCommunityNavigationMenu .homeButton`	`.comm-navigation .slds-list__item a[data-type="home"]`

Home Menu Item Link

<col> </col> <col> </col> <thead> <tr> <th> Previous Selectors </th> <th> New Selector </th> </tr> </thead> <tbody> <tr> <td> <p> <code>.forceCommunityNavigationMenu</code> </p> <p> <code>.homeLink.forceCommunityNavigationMenu</code> </p> <p> <code>.homeButton.comm-navigation .slds-list__item a[data-type="home"]</code> </p> </td> <td> <code>.comm-navigation .comm-navigation__item a[data-type="home"]</code> </td> </tr> </tbody> </table></sfdocstbl>

Mobile Menu Toggle Button

Previous Selector	New Selector
`.forceCommunityNavigationMenu .toggleNav`	`.siteforceServiceBody .cHeaderPanel .cAltToggleNav`

Top-Level Menu Items

Includes submenu triggers.

<col> </col> <col> </col> <thead> <tr> <th> Previous Selector </th> <th> New Selector </th> </tr> </thead> <tbody> <tr> <td> <p> <code>.forceCommunityNavigationMenu .menuItem</code> </p> <p> <code>.forceCommunityGlobalNavigation .navigationMenuNode</code> </p> </td> <td> <code>.comm-navigation .comm-navigation__list > .slds-list__item</code> </td> </tr> <tr> <td> <p> <code>.forceCommunityNavigationMenu .menuItem</code> </p> <p> <code>.forceCommunityGlobalNavigation .navigationMenuNode</code> </p> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item</code> </p> </td> <td> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item > .comm-navigation__item</code> </p> </td> </tr> </tbody> </table></sfdocstbl>

Current Top-Level Menu Item

<col> </col> <col> </col> <thead> <tr> <th> Previous Selector </th> <th> New Selector </th> </tr> </thead> <tbody> <tr> <td> <p> <code>.forceCommunityNavigationMenu .current</code> </p> <p> <code>.forceCommunityGlobalNavigation .menuItem.current</code> </p> </td> <td> <code>.comm-navigation .comm-navigation__list > .slds-list__item > .slds-is-active</code> </td> </tr> <tr> <td> <p> <code>.forceCommunityNavigationMenu .current</code> </p> <p> <code>.forceCommunityGlobalNavigation .menuItem.current</code> </p> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item > .slds-is-active</code> </p> </td> <td> <code>.comm-navigation .comm-navigation__list > .slds-list__item> .comm-navigation__item > .slds-is-active</code> </td> </tr> </tbody> </table></sfdocstbl>

Top-Level Menu Item Links

<col> </col> <col> </col> <thead> <tr> <th> Previous Selector </th> <th> New Selector </th> </tr> </thead> <tbody> <tr> <td> <p> <code>.forceCommunityNavigationMenu .menuItemLink</code> </p> <p> <code>.forceCommunityNavigationMenu a.menuItemLink</code> </p> <p> <code>.forceCommunityNavigationMenu .menuItem .menuItemLink</code> </p> <p> <code>.forceCommunityNavigationMenu .menuItem a</code> </p> <p> <code>.forceCommunityNavigationMenu .menuItem a.menuItemLink</code> </p> </td> <td> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item > a</code> </p> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item > button</code> </p> </td> </tr> <tr> <td> <p> <code>.forceCommunityNavigationMenu .menuItemLink</code> </p> <p> <code>.forceCommunityNavigationMenu a.menuItemLink</code> </p> <p> <code>.forceCommunityNavigationMenu .menuItem .menuItemLink</code> </p> <p> <code>.forceCommunityNavigationMenu .menuItem a</code> </p> <p> <code>.forceCommunityNavigationMenu .menuItem a.menuItemLink</code> </p> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item > a</code> </p> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item > button</code> </p> </td> <td> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item> .comm-navigation__item > a</code> </p> <p> <code>.comm-navigation .comm-navigation__list > .slds-list__item> .comm-navigation__item > button</code> </p> </td> </tr> </tbody> </table></sfdocstbl>

Submenu Items

Previous Selector	New Selector
`.forceCommunityNavigationMenu .subMenuItem`	`.comm-navigation .slds-list_vertical.slds-is-nested .slds-list__item`
`.forceCommunityNavigationMenu .subMenuItem` `.comm-navigation .slds-list_vertical.slds-is-nested .slds-list__item`	`.comm-navigation .slds-list_vertical.slds-is-nested .comm-navigation__item`

Current/Active Submenu Item

Previous Selector	New Selector
`.forceCommunityNavigationMenu .subMenuItem.current`	`.comm-navigation .slds-list_vertical.slds-is-nested .slds-list__item .slds-is-active`
`.forceCommunityNavigationMenu .subMenuItem.current` `.comm-navigation .slds-list_vertical.slds-is-nested .slds-list__item .slds-is-active`	`.comm-navigation .slds-list_vertical.slds-is-nested .comm-navigation__item .slds-is-active`

Submenu Trigger Link

<col> </col> <col> </col> <thead> <tr> <th> Previous Selector </th> <th> New Selector </th> </tr> </thead> <tbody> <tr> <td> <p> <code>.forceCommunityNavigationMenu .triggerLink</code> </p> <p> <code>.forceCommunityNavigationMenu .triggerLabel</code> </p> </td> <td> <code>.comm-navigation .slds-list__item button:enabled</code> </td> </tr> <tr> <td> <p> <code>.forceCommunityNavigationMenu .triggerLink</code> </p> <p> <code>..forceCommunityNavigationMenu .triggerLabel</code> </p> <p> <code>.comm-navigation .slds-list__item button:enabled</code> </p> </td> <td> <code>.comm-navigation .comm-navigation__item button:enabled</code> </td> </tr> </tbody> </table></sfdocstbl>

Submenu Trigger Link Icon

Previous Selector	New Selector
`.forceCommunityNavigationMenu .triggerLink .forceIcon`	`.comm-navigation .slds-list__item button:enabled .slds-icon_container`
`.forceCommunityNavigationMenu .triggerLink .forceIcon` `.comm-navigation .slds-list__item button:enabled .slds-icon_container`	`.comm-navigation .comm-navigation__item button:enabled .slds-icon_container`

Menu Items

Includes top-level and submenu items.

Previous Selector	New Selector
`.forceCommunityNavigationMenu .navigationMenu li`	`.comm-navigation .slds-list__item`
`.forceCommunityNavigationMenu .navigationMenu li` `.comm-navigation .slds-list__item`	`.comm-navigation .comm-navigation__item`

Menu Item Links

Includes top-level and submenu items.

<col> </col> <col> </col> <thead> <tr> <th> Previous Selector </th> <th> New Selector </th> </tr> </thead> <tbody> <tr> <td> <p> <code>.forceCommunityNavigationMenu a</code> </p> <p> <code>.forceCommunityNavigationMenu a.menuItemLink</code> </p> </td> <td> <p> <code>.comm-navigation .slds-list__item a</code> </p> <p> <code>.comm-navigation .slds-list__item button</code> </p> </td> </tr> <tr> <td> <p> <code>.forceCommunityNavigationMenu a</code> </p> <p> <code>.forceCommunityNavigationMenu a.menuItemLink</code> </p> <p> <code>.comm-navigation .slds-list__item a</code> </p> <p> <code>.comm-navigation .slds-list__item button</code> </p> </td> <td> <code>.comm-navigation .comm-navigation__item a</code> <code>.comm-navigation .comm-navigation__item button</code> </td> </tr> </tbody> </table></sfdocstbl>

Submenus

Previous Selector	New Selector
`.forceCommunityNavigationMenu .subMenu`	`.comm-navigation .slds-list_vertical.slds-is-nested`

Submenu Items

Previous Selector	New Selector
`.forceCommunityNavigationMenu .subMenuItem`	`.comm-navigation .slds-list_vertical.slds-is-nested .slds-list__item`
`.forceCommunityNavigationMenu .subMenuItem` `.comm-navigation .slds-list_vertical.slds-is-nested .slds-list__item`	`.comm-navigation .slds-list_vertical.slds-is-nested .comm-navigation__item`

Submenu Item Links

Previous Selector	New Selector
`.forceCommunityNavigationMenu .subMenuItem a` `.forceCommunityNavigationMenu .subMenu a`	`.comm-navigation .slds-list_vertical.slds-is-nested .slds-list__item a`
`.comm-navigation .slds-list_vertical.slds-is-nested .comm-navigation__item`	`.comm-navigation .slds-list_vertical.slds-is-nested .comm-navigation__item a`