Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Brand Your Aura Site
Update a Template with the Theme Panel
Use the CSS Editor for Custom CSS
Migrate CSS Overrides
CSS Overrides Migration for the Navigation Menu
CSS Overrides Migration for the Panels Container
CSS Overrides Migration for the Record Banner Component
CSS Overrides Migration for the Record Detail Component
CSS Overrides Migration for the Record Layout Component
CSS Overrides Migration for the Record List Component
CSS Overrides Migration for the Record Related List Component
CSS Overrides Migration for the Related Articles Component
CSS Overrides Migration for the Reputation Leaderboard Component
CSS Overrides Migration for the Embedded Service Sidebar Header Component
CSS Overrides Migration for Trending Articles by Topic Component
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Use Expressions to Add Dynamic Data to Aura Sites
Configure Swappable Search and Profile Menu Components
Ensure Custom Components in Orgs with Experience Cloud Sites Are Secure
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: CSP, LWS, and Lightning Locker
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Avoid Deployment Issues When Moving to Enhanced LWR Sites
Considerations for Deploying Authenticated LWR Sites
ExperienceBundle for Experience Builder Sites
PDF

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.

  • 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.

Note

Full Navigation Menu

Previous Selector New Selector

.forceCommunityNavigationMenu

.forceCommunityNavigationMenu #navigationMenu

.forceCommunityNavigationMenu .navigationMenu

.forceCommunityNavigationMenu .navigationMenuWrapper

 .comm-navigation

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

Previous Selectors New Selector

.forceCommunityNavigationMenu

.homeLink.forceCommunityNavigationMenu

.homeButton.comm-navigation .slds-list__item a[data-type="home"]

 .comm-navigation .comm-navigation__item a[data-type="home"]

Mobile Menu Toggle Button

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

Top-Level Menu Items

Includes submenu triggers.

Previous Selector New Selector

.forceCommunityNavigationMenu .menuItem

.forceCommunityGlobalNavigation .navigationMenuNode

 .comm-navigation .comm-navigation__list > .slds-list__item

.forceCommunityNavigationMenu .menuItem

.forceCommunityGlobalNavigation .navigationMenuNode

.comm-navigation .comm-navigation__list > .slds-list__item

.comm-navigation .comm-navigation__list > .slds-list__item > .comm-navigation__item

Current Top-Level Menu Item

Previous Selector New Selector

.forceCommunityNavigationMenu .current

.forceCommunityGlobalNavigation .menuItem.current

.comm-navigation .comm-navigation__list > .slds-list__item > .slds-is-active

.forceCommunityNavigationMenu .current

.forceCommunityGlobalNavigation .menuItem.current

.comm-navigation .comm-navigation__list > .slds-list__item > .slds-is-active

 .comm-navigation .comm-navigation__list > .slds-list__item> .comm-navigation__item > .slds-is-active

Top-Level Menu Item Links

Previous Selector New Selector

.forceCommunityNavigationMenu .menuItemLink

.forceCommunityNavigationMenu a.menuItemLink

.forceCommunityNavigationMenu .menuItem .menuItemLink

.forceCommunityNavigationMenu .menuItem a

.forceCommunityNavigationMenu .menuItem a.menuItemLink

.comm-navigation .comm-navigation__list > .slds-list__item > a

.comm-navigation .comm-navigation__list > .slds-list__item > button

.forceCommunityNavigationMenu .menuItemLink

.forceCommunityNavigationMenu a.menuItemLink

.forceCommunityNavigationMenu .menuItem .menuItemLink

.forceCommunityNavigationMenu .menuItem a

.forceCommunityNavigationMenu .menuItem a.menuItemLink

.comm-navigation .comm-navigation__list > .slds-list__item > a

.comm-navigation .comm-navigation__list > .slds-list__item > button

.comm-navigation .comm-navigation__list > .slds-list__item> .comm-navigation__item > a

.comm-navigation .comm-navigation__list > .slds-list__item> .comm-navigation__item > button

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

Previous Selector New Selector

.forceCommunityNavigationMenu .triggerLink

.forceCommunityNavigationMenu .triggerLabel

 .comm-navigation .slds-list__item button:enabled

.forceCommunityNavigationMenu .triggerLink

..forceCommunityNavigationMenu .triggerLabel

.comm-navigation .slds-list__item button:enabled

 .comm-navigation .comm-navigation__item button:enabled

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.

Previous Selector New Selector

.forceCommunityNavigationMenu a

.forceCommunityNavigationMenu a.menuItemLink

.comm-navigation .slds-list__item a

.comm-navigation .slds-list__item button

.forceCommunityNavigationMenu a

.forceCommunityNavigationMenu a.menuItemLink

.comm-navigation .slds-list__item a

.comm-navigation .slds-list__item button

 .comm-navigation .comm-navigation__item a.comm-navigation .comm-navigation__item button

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