diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js index 399adb154..93fb78513 100644 --- a/packages/cxl-ui/src/components/cxl-marketing-nav.js +++ b/packages/cxl-ui/src/components/cxl-marketing-nav.js @@ -274,32 +274,34 @@ export class CXLMarketingNavElement extends LitElement { * @since 2023.05.01 * @see https://app.clickup.com/t/861mkj72q */ - const canScroll = overlay.querySelector('.can-scroll'); - // Remove the scroll indicator if it exists - if (canScroll) { - overlay.removeChild(canScroll); - } + // Make sure we are on a desktop + if (this.wide) { + const canScroll = overlay.querySelector('.can-scroll'); - const menuItem = document.createElement('vaadin-context-menu-item'); - - if (listBox.offsetHeight > overlay.offsetHeight) { - menuItem.classList.add('can-scroll'); - render(html``, menuItem); - overlay.appendChild(menuItem); - - overlay.shadowRoot - .querySelector("[part='overlay'") - .addEventListener('scroll', ({ target }) => { - // Check if we have scrolled to the bottom - if (Math.ceil(target.scrollTop) === target.scrollHeight - target.offsetHeight) { - menuItem.hidden = true; - } else { - menuItem.hidden = false; - } - }); - } else { - overlay.removeChild(menuItem); + // Remove the scroll indicator if it exists + if (canScroll) { + overlay.removeChild(canScroll); + } + + const menuItem = document.createElement('vaadin-context-menu-item'); + + if (listBox.offsetHeight > overlay.offsetHeight) { + menuItem.classList.add('can-scroll'); + render(html``, menuItem); + overlay.appendChild(menuItem); + + overlay.shadowRoot + .querySelector("[part='overlay']") + .addEventListener('scroll', ({ target }) => { + // Check if we have scrolled to the bottom + if (Math.ceil(target.scrollTop) === target.scrollHeight - target.offsetHeight) { + menuItem.hidden = true; + } else { + menuItem.hidden = false; + } + }); + } } }