💁‍♂️ Add Info to Native User Menu with CSS

Ask for Help
9

The following code does not involve containers and special class names, because the class names are given directly in the richtext component HTML code.

Richtext component:

<h6 class="showText" style="right: 0; text-align: right; margin: 0 15px;  margin-top: -12px; padding: 0px;color:white; font-weight:bold;">$150.00</h6>

Code in custom CSS:

/*Default hidden state*/
.showText {
  display: none;
}
/*Open menu state*/
#root:has(#app-modal-root li:first-child:hover) #page-root:not(:has(.mobile-layer)) .showText {
  display: block;
  position: sticky;
  top:50px;
  height:0;
  z-index:9999;
}
/*Make the fly-out transparent*/
#root:has(#app-modal-root li:hover) #app-modal-root:not(:has(.mobile-layer)) > *{
position: relative;
background: rgb(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
2 Likes