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

Jen_NYCP · September 24, 2020, 4:52pm

Where does all of this go? lol

Lucas_Pires · October 23, 2020, 12:17am

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>

avanavana · November 21, 2020, 7:21pm

~~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.

yinon_raviv · November 21, 2020, 7:36pm

Lucas_Pires:

<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.

yinon_raviv · November 21, 2020, 7:57pm

OK Got it to work and its beatifull. thanks brother

Rosewebstudio · November 21, 2020, 8:18pm

Well done looks great

yinon_raviv · November 21, 2020, 8:25pm

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?

In android device the edit is completely gone

ehdubya · December 12, 2020, 11:00pm

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

Thanks!

yinon_raviv · December 13, 2020, 5:21am

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

france1 · September 13, 2021, 9:32am

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?

ThinhDinh · September 13, 2021, 10:11am

You enter it in a rich text component.

Damon_Salvatore · September 17, 2021, 9:48am

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”.

ThinhDinh · September 17, 2021, 11:25am

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.