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

**URL:** <https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752>\
**Category:** Ask for Help\
**Created:** [August 20, 2024, 10:39pm UTC](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752 "2024-08-20T22:39:49Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 22, 2024, 5:46pm UTC](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752/21 "2024-08-22T17:46:13Z")

</div>

My main issue is that you were able to solve it but I can’t use your solution! All of my CSS works exactly as I intended but with Compiled turned ON. To turn it OFF and redevelop could cost me 40 hrs. (Just guessing)

Let me ask is there a way we could modify your code to work with Compiled turned ON?

> [@Himaladin](#):
>
> If the media queries you’re using don’t produce the desired results, make sure to check if the queries are relevant to your target devices.

The media queries work as planned. I’m specifically targeting desktop users who may resize the screen while using the site… it also covers different screen sizes at the same time. In that case I think the media query is the way. We could come back to this later 😉

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 22, 2024, 5:49pm UTC](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752/22 "2024-08-22T17:49:08Z")

</div>

You know him, don’t you? 😄

 ![Screenshot 2024-08-22 at 23.35.25](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/2/3278295598bf3cc509bb324092ac52c8f6e58a76.jpeg)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 22, 2024, 5:55pm UTC](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752/23 "2024-08-22T17:55:43Z")

</div>

Of course I know Robert Petitto… he’s the reason we’re all here 🤓

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 23, 2024, 5:36am UTC](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752/25 "2024-08-23T05:36:32Z")

</div>

You can use [The W3C CSS Validation Service](https://jigsaw.w3.org/css-validator/#validate_by_input) to validate your code. The results show that you are using invalid properties: `scale` and `rotate`.

 ![Screenshot 2024-08-23 at 12.29.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/f/af837bd289619a39db6c61d89d8ab3a2cfb201e2.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 23, 2024, 6:41am UTC](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752/26 "2024-08-23T06:41:45Z")

</div>

After I observed it in more detail, I noticed different behavior compared to my earlier tests since I first started using this new Glide app. Today, after replacing all of my code with yours, I found that when the switch is turned on, some code actually works. @ThinhDinh, what is your view on the meaning of this button? I recall that you also asked about it before.

Out of curiosity, I tested it further, and when the switch is turned on, you must write your code perfectly. The comment `//` added in front of a selector is not allowed to deactivate a block of code. You need to fully close a block of code using `/*Code*/`. It seems like there’s some validation here ensuring your code is written correctly.  
Additionally, I found that there are code restrictions at the `#root` level that don’t work when the switch is on.

```auto
/*Make the fly-out transparent*/
#root:has(#app-modal-root li) #app-modal-root:not(:has(.mobile-layer)):not(:has([data-testid="wc-item"])) > * {
  background: rgba(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);
}

```

It looks like my understanding of the ‘use compiled CSS’ feature needs revision.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 30, 2024, 6:42am UTC](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752/27 "2024-08-30T06:42:10Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

[Previous page](https://community.glideapps.com/t/add-info-to-native-user-menu-with-css/75752.md?page=1)