:root { --dd-w-wide: 900px; --dd-w-narrow: 620px; /* 1 to 4 items */ --dd-pad: 16px; --dd-gap: 24px; /* gutter between the two columns */ --dd-row-gap: 2px; /* rail geometry - constant */ --rail-w: 236px; --rail-icon: 40px; --rail-desc-top: 100px; /* ---- rail CONFIG - these defaults mean "no rail" ---- Section 8 overrides them per menu. Do not set them here. */ --rail-heading: none; --rail-desc: none; --rail-icon-url: none; --rail-block: 0px; /* rail width + gutter, reserved by the panel */ --rail-divider: transparent; --rail-list-pad: 0px; --rail-min-h: 0px; /* Smarsh brand palette (visual identity reference): border/divider = Neutral Tone 1, hover = Neutral Tone 3, heading = Deep Blue, description = Extended Neutral Dark, accent / icon fill = Bright Blue */ --dd-border: #D1DDE9; --dd-divider: #D1DDE9; --dd-hover: #EAF3F9; --dd-heading: #170035; --dd-muted: #6D73AD; --dd-accent: #1500FF; } /* ---- 1. Positioning context = the full-width header bar --------------- */ .comm-header, .siteforceHeaderLayout .comm-header, .forceCommunityThemeHeaderLayout { position: relative; overflow: visible; z-index: 1000; } /* ---- 2. Strip positioning from the nav structure --------------------- */ .comm-navigation, .comm-navigation__list, .visible-links, .comm-navigation__top-level-item, .comm-navigation__menu-item, .forceCommunityGlobalNavigation, .forceCommunityGlobalNavigation ul, .forceCommunityGlobalNavigation li, .uiMenu, .uiAbstractList, .slds-dropdown-trigger, .slds-dropdown-trigger_click, .slds-dropdown-trigger--click, .slds-context-bar__item, .slds-context-bar__label-action { position: static !important; overflow: visible; } /* ---- 3. Stretch the popup wrapper, and make it draw nothing ---------- */ .comm-navigation .uiPopupTarget, .comm-navigation .uiMenuList, .forceCommunityGlobalNavigation .uiPopupTarget, .forceCommunityGlobalNavigation .uiMenuList { position: absolute !important; inset: auto 0 auto 0; width: auto !important; min-width: 0 !important; max-width: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ---- 4. The panel - wide by default --------------------------------- padding-left reserves the rail via --rail-block, which is 0 unless a menu opts in. So a panel with no rail is correctly padded, not indented by 276px of empty space. */ .uiMenu .subMenu, .subMenu, .comm-navigation__sub-menu, .comm-navigation .slds-dropdown { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; width: var(--dd-w-wide) !important; max-width: 100% !important; min-width: 0 !important; transform: none !important; box-sizing: border-box; padding: var(--dd-pad); padding-left: calc(var(--dd-pad) + var(--rail-block)); z-index: 1001; background: #fff; border: 1px solid var(--dd-border); border-radius: 0 0 4px 4px; box-shadow: 0 4px 12px rgb(0 0 0 / 10%); } /* ---- 5. Narrow the panel for short menus (progressive enhancement) --- Counts direct children of the list, so it does not depend on the item class. If :has() is unsupported every panel stays wide - the previous behaviour, not a broken one. */ .subMenu:not(:has(ul > *:nth-child(5))), .comm-navigation__sub-menu:not(:has(ul > *:nth-child(5))), .comm-navigation .slds-dropdown:not(:has(ul > *:nth-child(5))) { width: var(--dd-w-narrow) !important; } /* ---- 6. Kill the pointer (nubbin) ---------------------------------- Targets the PANEL's pseudo-elements. The rail uses the LIST's, so the two never collide. */ .subMenu:before, .subMenu:after, .slds-dropdown:before, .slds-dropdown:after, .comm-navigation__sub-menu:before, .comm-navigation__sub-menu:after, [class*="slds-nubbin"]:before, [class*="slds-nubbin"]:after { display: none !important; content: none !important; border: 0 !important; background: none !important; } .comm-navigation .nubbin, .forceCommunityGlobalNavigation .nubbin { display: none !important; } /* ---- 7. The list, and the rail ------------------------------------- The rail has no markup, so it is drawn with the list's two pseudo-elements: :before is icon plus heading, :after is description. Both are absolutely positioned against the panel (the nearest positioned ancestor), so the list stays static and nothing fights section 2. content: var(--rail-heading) resolves to "none" by default, which generates no pseudo-element at all. That is what makes the rail opt-in. */ .subMenu > ul, .subMenu > ul.scrollable, .comm-navigation__sub-menu > ul { display: flex; flex-wrap: wrap; gap: var(--dd-row-gap) var(--dd-gap); margin: 0; padding-left: var(--rail-list-pad); list-style: none; border-left: 1px solid var(--rail-divider); min-height: var(--rail-min-h); max-height: none !important; overflow: visible !important; } .subMenu > ul:before, .comm-navigation__sub-menu > ul:before { content: var(--rail-heading); display: block; position: absolute; left: var(--dd-pad); top: var(--dd-pad); width: var(--rail-w); box-sizing: border-box; padding-top: calc(var(--rail-icon) + 12px); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--dd-heading); /* pseudo-elements inherit white-space from the list, and the theme sets nowrap there - without this the text refuses to wrap and runs past the divider */ white-space: normal; overflow-wrap: break-word; text-align: left; background-image: var(--rail-icon-url); background-repeat: no-repeat; background-position: 0 0; background-size: var(--rail-icon) var(--rail-icon); } .subMenu > ul:after, .comm-navigation__sub-menu > ul:after { content: var(--rail-desc); display: block; position: absolute; left: var(--dd-pad); top: var(--rail-desc-top); width: var(--rail-w); box-sizing: border-box; font-size: 13px; line-height: 1.5; color: var(--dd-muted); white-space: normal; overflow-wrap: break-word; text-align: left; } /* ---- 8. Per-menu rail config ---------------------------------------- One rule per menu. Indices are children of ul.visible-links: 1 Home 2 Product Support 3 Resources 4 Account Management 5 Onboarding 6 More Home, Onboarding and More are intentionally absent - they get no rail. ORDER DEPENDENCY: these are positional. See the note in section 11 about why the rail is switched off at narrow widths, which is what keeps the overflow menu from shifting these indices under you. */ /* 2 - Product Support */ .visible-links > li:nth-child(2) { --rail-heading: "Product Support"; --rail-desc: "Get product-specific documentation, knowledge articles, training, and discussion threads."; /* brand icon: data-2, the 9-dot product grid - deliberately matches the product picker on the login screen (Deep Blue) */ --rail-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill='%23170035'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='16'%20cy='4.09'%20r='3.97'/%3E%3Ccircle%20cx='4.09'%20cy='4.09'%20r='3.97'/%3E%3Ccircle%20cx='27.91'%20cy='4.09'%20r='3.97'/%3E%3Ccircle%20cx='16'%20cy='16'%20r='3.97'/%3E%3Ccircle%20cx='4.09'%20cy='16'%20r='3.97'/%3E%3Ccircle%20cx='27.91'%20cy='16'%20r='3.97'/%3E%3Ccircle%20cx='16'%20cy='27.91'%20r='3.97'/%3E%3Ccircle%20cx='4.09'%20cy='27.91'%20r='3.97'/%3E%3Ccircle%20cx='27.91'%20cy='27.91'%20r='3.97'/%3E%3C/svg%3E"); --rail-block: 260px; --rail-divider: var(--dd-divider); --rail-list-pad: 24px; --rail-min-h: 140px; } /* 3 - Resources */ .visible-links > li:nth-child(3) { --rail-heading: "Resources"; --rail-desc: "Join discussions, submit ideas, take training courses, and check product statuses."; /* brand icon: organization-documents-stack (Deep Blue) */ --rail-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill='%23170035'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cpolygon%20points='22.17%20.26%2022.17%206.28%2028.01%206.28%2022.17%20.26'/%3E%3Cpath%20d='M21.09,7.88c-.31,0-.56-.25-.56-.56V.14l-15.87-.02c-.48,0-.87.39-.87.87v30c0,.48.39.87.87.87h22.67c.48,0,.87-.39.87-.87V7.88s-7.12,0-7.12,0ZM16.58,25.28H7.6v-1.01h8.98v1.01ZM24.24,21.15H7.6v-1.01h16.64v1.01ZM24.24,17.01H7.6v-1.01h16.64v1.01ZM24.24,12.88H7.6v-1.01h16.64v1.01Z'/%3E%3C/svg%3E"); --rail-block: 260px; --rail-divider: var(--dd-divider); --rail-list-pad: 24px; --rail-min-h: 140px; } /* 4 - Account Management */ .visible-links > li:nth-child(4) { --rail-heading: "Account Management"; --rail-desc: "Review and manage invoices, track cases, see your service packages, and manage support rights."; /* brand icon: supervision-contact / contact card (Deep Blue) */ --rail-icon-url: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill='%23170035'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M28.16,6.82H3.84C1.79,6.82.12,8.49.12,10.54v14.19c0,2.05,1.66,3.71,3.71,3.71h24.32c2.05,0,3.71-1.66,3.71-3.71v-14.19c0-2.05-1.66-3.71-3.71-3.71ZM6.3,12.08c.87-.87,2.29-.84,3.13.07.74.81.74,2.09,0,2.91-.84.92-2.26.94-3.13.07-.84-.84-.84-2.21,0-3.06ZM11.08,23.81h-6.47v-4.04c0-1.79,1.45-3.24,3.24-3.24s3.24,1.45,3.24,3.24v4.04ZM27.33,22.43h-12.11v-1.58h12.11v1.58ZM27.33,18.42h-12.11v-1.58h12.11v1.58ZM27.33,14.41h-12.11v-1.58h12.11v1.58Z'/%3E%3Crect%20x='9.94'%20y='3.56'%20width='12.11'%20height='1.79'%20rx='.89'%20ry='.89'/%3E%3C/svg%3E"); --rail-block: 260px; --rail-divider: var(--dd-divider); --rail-list-pad: 24px; --rail-min-h: 140px; } /* ---- 9. Columns - one under 5 items, two at 5 or more --------------- :nth-last-child(n+5) matches any item with at least four after it. In a list of N that is items 1 to N-4, so it matches nothing unless N is 5 or more. The ~ sweeps up the final four. Targets direct children of the list, because the flex item here is li.subMenuItem and there is a wrapper before the anchor - sizing a grandchild does nothing, which is what made the columns look random. */ .subMenu > ul > *, .comm-navigation__sub-menu > ul > * { flex: 0 0 100%; min-width: 0; list-style: none; } .subMenu > ul > *:nth-last-child(n+5), .subMenu > ul > *:nth-last-child(n+5) ~ *, .comm-navigation__sub-menu > ul > *:nth-last-child(n+5), .comm-navigation__sub-menu > ul > *:nth-last-child(n+5) ~ * { flex: 0 0 calc(50% - var(--dd-gap) / 2); } /* any wrapper between the flex item and the anchor must fill it */ .subMenu > ul > * > *, .comm-navigation__sub-menu > ul > * > * { display: block; width: 100%; min-width: 0; box-sizing: border-box; } /* ---- 10. Links ------------------------------------------------------ */ .subMenu > ul a, .comm-navigation__sub-menu > ul a { display: block; width: 100%; box-sizing: border-box; padding: 7px 12px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; line-height: 1.4; } .subMenu > ul a:hover, .comm-navigation__sub-menu > ul a:hover { background: var(--dd-hover); } /* ---- 11. Narrow widths ---------------------------------------------- TWO SEPARATE BREAKPOINTS, FOR TWO DIFFERENT REASONS. (a) 1100px - turn the rail OFF. This theme uses ul.visible-links plus an overflow "More" menu. As the window narrows, Salesforce MOVES nav items out of visible-links and into More - which renumbers the remaining children. Section 8 is positional, so once that happens Resources would inherit Product Support's heading. Switching the rail off before overflow can start sidesteps the problem entirely. MEASURE THIS: narrow your window until "More" appears in the nav, and set this breakpoint just above that width. 1100px is a starting guess. (b) 768px - single column, full bleed. Unchanged. */ @media (max-width: 1099px) { .visible-links > li:nth-child(2), .visible-links > li:nth-child(3), .visible-links > li:nth-child(4) { --rail-heading: none; --rail-desc: none; --rail-icon-url: none; --rail-block: 0px; --rail-divider: transparent; --rail-list-pad: 0px; --rail-min-h: 0px; } } @media (max-width: 767px) { .uiMenu .subMenu, .subMenu, .comm-navigation__sub-menu, .comm-navigation .slds-dropdown { width: auto !important; max-width: none !important; border-radius: 0; } .subMenu > ul > *, .comm-navigation__sub-menu > ul > * { flex: 0 0 100% !important; } } /* ---- 12. Optional, from your original ------------------------------- Your DOM does contain li.uiMenuItem wrappers, so if submenu items ever render inline instead of stacking, this is the fix: .uiMenuItem [role="presentation"] { display: block !important; } ---------------------------------------------------------------------- */