# Ability to upload and display Logo in fixed top bar instead of the tab name

**URL:** <https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608>\
**Category:** Feature Requests\
**Created:** [August 5, 2020, 4:39pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608 "2020-08-05T16:39:45Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [September 24, 2020, 4:52pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/21 "2020-09-24T16:52:04Z")

</div>

Where does all of this go? lol

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 23, 2020, 12:17am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/22 "2020-10-23T00:17:01Z")

</div>

## Updated - Logo in Nav bar

```
<span/>
<style>
#app-root [opacity='1'] {
  color: transparent; 
}
.nav-bar-root {
  content: "";
  display: block;
  background-image: url(URL);
  background-size: 70px 70px;
  background-repeat: no-repeat; 
background-position: center, center;
;}
</style>

```

---

<div class="post-metadata">

**Author:** ![avanavana](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/avanavana/32/15637_2.png) [@avanavana](https://community.glideapps.com/u/avanavana)\
**Post date:** [November 21, 2020, 7:21pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/23 "2020-11-21T19:21:12Z")

</div>

~~What field are you putting this markup into? And where is the CSS var “URL” coming from?~~

Nm, I guess it is a rich text field and that is just a placeholder for any URL. Pretty nice. I just used this trick to finally get rid of the default “Home” tab title text on one of my apps on a branded landing screen.

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [November 21, 2020, 7:36pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/24 "2020-11-21T19:36:12Z")

</div>

> [@Lucas\_Pires](#):
>
> ```auto
> <span/>
> <style>
> #app-root div[opacity='1'] {
> color: transparent; 
> }
> .nav-bar-root {
> content: "";
> display: block;
> background-image: url(URL);
> background-size: 70px 70px;
> background-repeat: no-repeat; 
> background-position: center, center;
> ;}
> </style>
> 
> ```

didnt work for me. replaced the URL with URL from my GDrive and the logo didn’t show.

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [November 21, 2020, 7:57pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/25 "2020-11-21T19:57:20Z")

</div>

OK Got it to work and its beatifull. thanks brother  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/7/a7665da4920f80d2cfa6a8b96b4869e18cf7087f.png)

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [November 21, 2020, 8:18pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/26 "2020-11-21T20:18:53Z")

</div>

Well done 👍 looks great

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [November 21, 2020, 8:25pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/27 "2020-11-21T20:25:26Z")

</div>

One thing i did notice is that it moved the edit pencil down on the search and if you don’t have search the edit is not apearing.  
@Lucas_Pires is there a way to fix this?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dcc478fd37a372166ab79f710ddd1e2f940cd839.png)

 ![BUG244](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/dac0d41d1d0b3734798cbecf63429e143cc47fea.gif)

In android device the edit is completely gone

 ![Screenshot_2020-11-21-22-28-56-039_com.android.chrome](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/c/fcec973fa63fa69ae39c27f947998c61e5005ba7.jpeg)

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [December 12, 2020, 11:00pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/28 "2020-12-12T23:00:52Z")

</div>

@yinon_raviv - may I ask what you had to do to get your gdrive link to work?

Thanks!

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [December 13, 2020, 5:21am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/29 "2020-12-13T05:21:45Z")

</div>

I uploaded to glide server and used the link I got which is working.  
I think Google is blocking those things 9n their side

---

<div class="post-metadata">

**Author:** ![france1](https://avatars.discourse-cdn.com/v4/letter/f/e47774/32.png) [@france1](https://community.glideapps.com/u/france1)\
**Post date:** [September 13, 2021, 9:32am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/31 "2021-09-13T09:32:01Z")

</div>

Hi all, I am really new at all this, but I would also very much like to add the logo on the bar on the top. I would love to se your trick Lucas but… where I am supposed to enter it?

---

<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:** [September 13, 2021, 10:11am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/32 "2021-09-13T10:11:09Z")

</div>

You enter it in a rich text component.

---

<div class="post-metadata">

**Author:** ![Damon\_Salvatore](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/damon_salvatore/32/17639_2.png) [@Damon\_Salvatore](https://community.glideapps.com/u/Damon_Salvatore)\
**Post date:** [September 17, 2021, 9:48am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/34 "2021-09-17T09:48:01Z")

</div>

Bonjour,

Je trouve super cette astuce pour insérer le logo dans la barre supérieure. Désolé de ma faible expérience par avance :pensif:. Quelle est la démarche, dois-je faire la modification dans le code source ou d’abord ajouter un composant de texte enrichi dans glide ? Je ne vois pas dans le code source ou est situé “nav–bar-root”.🤨

---

<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:** [September 17, 2021, 11:25am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/35 "2021-09-17T11:25:21Z")

</div>

You just have to add the code (if you have already had it) to a rich text component. It will insert the CSS to the page you’re working on automatically. Nav-bar-root is a class in any pages.

---

<div class="post-metadata">

**Author:** ![Casch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/casch/32/39482_2.png) [@Casch](https://community.glideapps.com/u/Casch)\
**Post date:** [March 10, 2022, 8:08pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/36 "2022-03-10T20:08:54Z")

</div>

@Lucas_Pires Thank you so much for sharing the RT. Do you use similar RT on the my profile screen in your Jungle app? The app is beautiful by the way! Job well done, you are very talented! Thanks!

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [March 10, 2022, 8:30pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/37 "2022-03-10T20:30:32Z")

</div>

I used it Casch! Thank you so much 😌

---

<div class="post-metadata">

**Author:** ![Casch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/casch/32/39482_2.png) [@Casch](https://community.glideapps.com/u/Casch)\
**Post date:** [March 10, 2022, 10:44pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/38 "2022-03-10T22:44:35Z")

</div>

@Lucas_Pires You’re very welcome. Would you be able to share the rich text format you used for your Jungle my profile screen? I love the idea of having a profile picture and a background photo. Cheers my friend! Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Casch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/casch/32/39482_2.png) [@Casch](https://community.glideapps.com/u/Casch)\
**Post date:** [March 11, 2022, 4:43pm UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/39 "2022-03-11T16:43:08Z")

</div>

I didn’t even know there was a CSS library for this kind of stuff, just stumbled across it. You do amazing work. Just wanted to say thank you!

---

<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:** [March 12, 2022, 12:13am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/40 "2022-03-12T00:13:08Z")

</div>

Hope you can find some useful things in there, and potentially contribute to that any time 😉

---

<div class="post-metadata">

**Author:** ![Casch](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/casch/32/39482_2.png) [@Casch](https://community.glideapps.com/u/Casch)\
**Post date:** [March 12, 2022, 12:35am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/42 "2022-03-12T00:35:05Z")

</div>

Of course! Your work is fantastic as well! Thank you for sharing what you know. It really gives me a chance to learn that type of stuff. It has really opened my eyes on what is possible, I already have some ideas 🙂 any tips for rich text and css starters?

---

<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:** [March 12, 2022, 1:53am UTC](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608/43 "2022-03-12T01:53:50Z")

</div>

My first tip is to use inspect element and dive into the code there to understand which stable classes you can work with.

You can take the code snippets @Lucas_Pires, me and other contributors uploaded to the library and try to play with the components to know how you can further improve those.

If you have an idea, please feel free to start a new thread and discuss it with us.

[Previous page](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608.md?page=1)

[Next page](https://community.glideapps.com/t/ability-to-upload-and-display-logo-in-fixed-top-bar-instead-of-the-tab-name/13608.md?page=3)