# Style help on how to achieve 0 border top of mobile

**URL:** <https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489>\
**Category:** Ask for Help\
**Created:** [April 22, 2025, 11:35pm UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489 "2025-04-22T23:35:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanp](https://avatars.discourse-cdn.com/v4/letter/r/7ea924/32.png) [@ryanp](https://community.glideapps.com/u/ryanp)\
**Post date:** [April 22, 2025, 11:35pm UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/1 "2025-04-22T23:35:55Z")

</div>

if you look at the screen shot on the Glide website they are using custom components to style, i’m looking for the same affect but no matter what i do i can’t get it to work, since im using the ai its rendering all in an iframe and i can’t seem to manage the classes or see how to make the page header transparent to achieve this look. any help would be awesome

 ![Screenshot 2025-04-22 at 7.32.22 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8f429d0c0ffc174590ba9ca487e1b595fe31c851.png)  
!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 23, 2025, 12:42am UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/2 "2025-04-23T00:42:32Z")

</div>

It was something that they seemed to develop internally and not released yet.

Here’s my attempt with CSS.

 ![CleanShot 2025-04-23 at 07.42.03](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/f/df797ff3e7f94cf122c1f3cc2ec342886a1e9444.jpeg)

```auto
#nav-root > div:first-of-type {
display: none;
}

div[data-testid="title-cover"] img {
height: 300px;
}

#app-root > div:first-of-type svg {
fill: white;
}

```

---

<div class="post-metadata">

**Author:** ![ryanp](https://avatars.discourse-cdn.com/v4/letter/r/7ea924/32.png) [@ryanp](https://community.glideapps.com/u/ryanp)\
**Post date:** [April 23, 2025, 3:43am UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/3 "2025-04-23T03:43:46Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> #nav-root > div:first-of-type {
> display: none;
> }
> 
> div[data-testid="title-cover"] img {
> height: 300px;
> }
> 
> #app-root > div:first-of-type svg {
> fill: white;
> }
> 
> ```

really appreciate it! I was trying to keep the hamburger any trick to that?

---

<div class="post-metadata">

**Author:** ![ryanp](https://avatars.discourse-cdn.com/v4/letter/r/7ea924/32.png) [@ryanp](https://community.glideapps.com/u/ryanp)\
**Post date:** [April 23, 2025, 4:46pm UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/4 "2025-04-23T16:46:32Z")

</div>

love the direction, but i cant lose the hamburger menu. could you help with that code?

 ![Screenshot 2025-04-23 at 12.43.21 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a9e605fcddff3af6a3de2902d0a0e3990e1e425e.png)  
 ![Screenshot 2025-04-23 at 12.43.50 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c9c01e8923bafddda9ae3f973edadf05b5b5fa34.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 24, 2025, 12:03am UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/5 "2025-04-24T00:03:48Z")

</div>

![CleanShot 2025-04-24 at 07.03.23](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/ef9e6db265ebce4f24eb58f7b773733158e6c7dd.jpeg)

```auto
#app-root > div:first-of-type {
  display: none;
}

#nav-root .section-container {
padding-top: 0;
}

button[data-testid="menu-left-button"] {
margin-top: 20px;
}

div[data-testid="title-cover"] img {
height: 300px;
}

#app-root > div:first-of-type svg {
fill: white;
}

```

---

<div class="post-metadata">

**Author:** ![Mariusz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mariusz/32/89415_2.png) [@Mariusz](https://community.glideapps.com/u/Mariusz)\
**Post date:** [April 24, 2025, 8:44am UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/6 "2025-04-24T08:44:22Z")

</div>

That looks really good, nice work Thinh!

Since you’re talking CSS, @ryanp, how did you achieve the floating bottom menu look on your app?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 24, 2025, 9:39am UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/7 "2025-04-24T09:39:22Z")

</div>

> [@Mariusz](#):
>
> how did you achieve the floating bottom menu look on your app?

> **[CSS Library by LowCode Agency](https://css-library.glide.page/dl/library/s/8836b3/r/W37PLSwoT2uhCW6DspZTWg)**

---

<div class="post-metadata">

**Author:** ![Mariusz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mariusz/32/89415_2.png) [@Mariusz](https://community.glideapps.com/u/Mariusz)\
**Post date:** [April 24, 2025, 10:12am UTC](https://community.glideapps.com/t/style-help-on-how-to-achieve-0-border-top-of-mobile/81489/8 "2025-04-24T10:12:30Z")

</div>

Thanks, haven’t seen this one before!