We had a custom nav bar added to our user home pages. According to our web developer, it appears that a recent platform update has removed the interactivity from the nav bar:
Does anyone know how to navigate around these continual changes that messes up our CSS? Is there perhaps a weakness in our own code that needs to be shored up? TIA!
<doc-layout-user-menu
id="doc-layout-user-menu"
class="doc-layout-user-menu ng-star-inserted"
inert=""
>
<dcb-ui-trap>
<div>
<div>
<div
class="dcb-ui-trap-focus-bait"
dcb-ui-keyboard-focusable-visible="false"
tabindex="-1"
></div>
<div>
<div
role="navigation"
class="user-menu-wrapper ui-shadow-md"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
dcb-ui-keyboard-focusable-visible="false"
data-dcb-ui-aria-label="User menu"
aria-label="User menu"
>
<div class="user-menu-header">
<ui-button-icon
iconname="close"
iconsize="sm"
class="dcb-ui-button ui-button dcb-ui-button-icon ui-button-icon ui-button-spacing-xxs"
>
<button
uiripple=""
class="ui-ripple"
type="button"
id="ac9a1858-beeb-446e-89f8-7824846bcafc"
aria-disabled="false"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
data-dcb-ui-aria-label="Close"
style="cursor: var(--ui-button-icon-cursor);"
>
<ui-icon
data-dcb-ui-version="1"
class="ui-icon-size-sm dcb-ui-icon ui-icon ng-star-inserted"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<span
class="color-neutral"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<svg viewBox="0 0 24 24" role="presentation" focusable="false">
<g
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-icon-name="close"
fill-rule="evenodd"
>
<polygon
points="19.015625 6.421875 13.390625 12 19.015625 17.578125 17.609375 18.984375 11.984375 13.40625 6.40625 18.984375 5 17.578125 10.578125 12 5 6.421875 6.40625 5.015625 11.984375 10.59375 17.609375 5.015625"
></polygon>
</g>
</svg>
</span>
</ui-icon>
</button>
</ui-button-icon>
<img
src="//cdn5.dcbstatic.com/files/e/t/etcconnect_docebosaas_com/themes/aa8f8334eb3937125ec8df37c8a9eddb3efc7021.jpg"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
/>
</div>
<div class="user-menu-container">
<div
role="region"
class="user-menu-details"
data-dcb-ui-aria-label="User details"
>
<div class="user-menu-details-top-wrapper">
<ui-avatar
data-dcb-ui-version="1"
class="ui-avatar-size-xl dcb-ui-avatar ui-avatar ng-star-inserted"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<div class="ui-avatar-wrapper">
<div
class="ui-avatar-background-light ui-avatar-body ui-avatar-text-color-accent"
style='background-image: url("//cdn5.dcbstatic.com/files/e/t/etcconnect_docebosaas_com/1762200000/msV6Cby2j5nNFmpdOUxfww/avatar/fbf5c1d370b0488a8eb93ef0f80f3527d2839054.png");'
></div>
</div>
</ui-avatar>
<div class="user-menu-sign-out">
<ui-button-link
class="dcb-ui-button-link ui-button-link"
>
<button
class="ui-text-link-negative"
type="button"
aria-disabled="false"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
>
Sign out
<ui-icon
data-dcb-ui-version="1"
size="xs"
name="exit-round"
color="negative"
class="ui-icon-size-xs dcb-ui-icon ui-icon"
>
<span
class="color-negative"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<svg
viewBox="0 0 24 24"
role="presentation"
focusable="false"
>
<g
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-icon-name="exit-round"
fill-rule="evenodd"
>
<path
d="M14.8199333,4 C19.3304,4 23,7.66953333 23,12.1800667 C23,16.6906 19.3304,20.3601333 14.8199333,20.3601333 C12.0983333,20.3601333 9.56286667,19.0122 8.03746667,16.7543333 C7.72826667,16.2967333 7.84866667,15.6751333 8.30626667,15.3659333 C8.764,15.0568 9.38546667,15.1770667..."
></path>
</g>
</svg>
</span>
</ui-icon>
</button>
</ui-button-link>
</div>
</div>
<div class="user-menu-details-bottom-wrapper">
<div class="user-menu-user-data">
<div class="user-menu-username ng-star-inserted">
Jen Russo
</div>
<div class="user-menu-email ng-star-inserted">
<hyd-ellipsable-text _nghost-ng-c3270063929="">
<div
_ngcontent-ng-c3270063929=""
class="ellipsed"
>
jen.russo@etcconnect.com
</div>
</hyd-ellipsable-text>
</div>
</div>
<ui-button-icon
iconsize="sm"
iconname="edit"
iconcolor="negative"
class="ui-button-negative dcb-ui-button ui-button dcb-ui-button-icon ui-button-icon ui-button-spacing-xxs"
>
<button
uiripple=""
class="ui-ripple ui-ripple-negative"
type="button"
id="ui-button-icon-1"
role="link"
aria-disabled="false"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
data-dcb-ui-aria-label="My profile"
style="cursor: var(--ui-button-icon-cursor);"
>
<ui-icon
data-dcb-ui-version="1"
class="ui-icon-size-sm dcb-ui-icon ui-icon ng-star-inserted"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<span
class="color-negative"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<svg
viewBox="0 0 24 24"
role="presentation"
focusable="false"
>
<g
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-icon-name="edit"
fill-rule="evenodd"
>
<path
d="M4,16.7088608 L13.7088608,7 L17,10.2911392..."
></path>
</g>
</svg>
</span>
</ui-icon>
</button>
</ui-button-icon>
</div>
</div>
<nav
class="user-menu-navigation ui-scrollable"
data-dcb-ui-aria-label="Main menu"
>
<ul>
<li
class="user-menu-item ng-star-inserted user-menu-item-active"
aria-current="true"
>
<a
uiripple=""
class="ui-ripple user-menu-item-link ng-star-inserted"
href="/pages/85/learningstage-home"
target="_self"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
data-dcb-ui-aria-label="LearningStage Home"
>
<i
class="user-menu-item-icon zmdi zmdi-home"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
></i>
<span class="user-menu-item-title">
LearningStage Home
</span>
</a>
</li>
<li class="user-menu-item ng-star-inserted">
<a
uiripple=""
class="ui-ripple user-menu-item-link ng-star-inserted"
href="/pages/102/my-courses-learning-plans"
target="_self"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
data-dcb-ui-aria-label="My Courses & Learning Plans"
>
<i
class="user-menu-item-icon zmdi zmdi-local-library"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
></i>
<span class="user-menu-item-title">
My Courses & Learning Plans
</span>
</a>
</li>
<li class="user-menu-item ng-star-inserted">
<a
uiripple=""
class="ui-ripple user-menu-item-link ng-star-inserted"
href="/pages/103/my-activity"
target="_self"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
data-dcb-ui-aria-label="My Activity"
>
<i
class="user-menu-item-icon zmdi zmdi-compass"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
></i>
<span class="user-menu-item-title">
My Activity
</span>
</a>
</li>
<li class="user-menu-item ng-star-inserted">
<a
uiripple=""
class="ui-ripple user-menu-item-link ng-star-inserted"
target="_blank"
href="https://learningstage.etcconnect.com/learn/my-profile"
data-dcb-ui-aria-label="My Profile - Opens in a new tab"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
aria-hidden="true"
aria-label="My Profile - Opens in a new tab"
>
<i
class="user-menu-item-icon zmdi zmdi-account"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
></i>
<span class="user-menu-item-title">
My Profile
</span>
<ui-icon
data-dcb-ui-version="1"
name="blank"
size="xs"
class="ui-icon-size-xs dcb-ui-icon ui-icon ng-star-inserted"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<span
class="color-neutral"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<svg
viewBox="0 0 24 24"
role="presentation"
focusable="false"
>
<g
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-icon-name="blank"
fill-rule="evenodd"
>
<path d="M13.7778406..."></path>
</g>
</svg>
</span>
</ui-icon>
</a>
</li>
<li class="user-menu-item ng-star-inserted">
<a
uiripple=""
class="ui-ripple user-menu-item-link ng-star-inserted"
href="/learn/catalog"
target="_self"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
data-dcb-ui-aria-label="Full Course Catalog"
>
<i
class="user-menu-item-icon zmdi zmdi-view-carousel"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
></i>
<span class="user-menu-item-title">
Full Course Catalog
</span>
</a>
</li>
<li class="user-menu-item ng-star-inserted">
<a
uiripple=""
class="ui-ripple user-menu-item-link ng-star-inserted"
target="_blank"
href="https://www.etcconnect.com/"
data-dcb-ui-aria-label="ETCConnect.com - Opens in a new tab"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
aria-hidden="true"
aria-label="ETCConnect.com - Opens in a new tab"
>
<i
class="user-menu-item-icon zmdi zmdi-view-web"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
></i>
<span class="user-menu-item-title">ETCConnect.com</span>
<ui-icon
data-dcb-ui-version="1"
name="blank"
size="xs"
class="ui-icon-size-xs dcb-ui-icon ui-icon ng-star-inserted"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<span
class="color-neutral"
data-dcb-ui-screen-reader-visible="true"
aria-hidden="true"
>
<svg
viewBox="0 0 24 24"
role="presentation"
focusable="false"
>
<g
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-icon-name="blank"
fill-rule="evenodd"
>
<path d="M13.7778406..."></path>
</g>
</svg>
</span>
</ui-icon>
</a>
</li>
</ul>
</nav>
</div>
<div class="user-menu-footer-wrapper ng-star-inserted">
<div class="user-menu-footer">
<a
href="javascript:void(0)"
class="ui-text-link ui-typography-link-1 ng-star-inserted"
dcb-ui-keyboard-focusable-visible="true"
tabindex="-1"
>
Cookie policy
</a>
<div class="user-menu-footer-version ui-typography-subtitle ng-star-inserted">
Version 7.8
</div>
</div>
</div>
</div>
<div
class="dcb-ui-trap-focus-bait"
dcb-ui-keyboard-focusable-visible="false"
tabindex="-1"
></div>
</div>
</div>
</div>
</dcb-ui-trap>
</doc-layout-user-menu>