Open Sesame! My 1st Trial to open a Glassmorph & Eclipse Door

I have a smartphone, not an iPhone (or any i-sth yet). Yes, it would be great to replace by div as suggested @Jeff_Hager if I remember well who wrote what about how to write CSS independently from Glide classes.

2 Likes

After the last ios update, a lot of CSS doesn’t work. I’m waiting for the Glide experts to pave the way.

1 Like

The sliding does not work for iPhone? :slightly_frowning_face:The Sharon logo, the burger appears and the horizontal spacing is not accurate on my Android now. I have to check my PC and the Builder again.

That’s why I only set it up on the 1st screen after the Entry door, not the other 4.

I tried using a div for your logo and pushing its position up, but it doesn’t work on iPhone. Both did not bring up the hamburger, the problem was only in the position of the logo. Check out the following differences in GDE and on iPhone:

  1. On iPhone

  2. GDE

1 Like

I’m interested in your div code anyway. If the logo shows, it’s position shall be relative to the title and the rest anyway.
Thks :cherry_blossom:
So the sliding works. Phew :sweat_smile:It’s still Sharon the issue (c’mon, Sharon! share us some good news, will you?)

I haven’t managed to position it properly.
If the image is placed in the glide-app-bar script then the logo will be at the root level above the door layer. On the other hand, if you use the div layer, it’s already under the door layer, but it doesn’t work on iOS.
Maybe you want to try it.

<div class="image"></div>
<pre><span><style>
.image {
position: fixed;
width: 100%;
height:100%; 
opacity:1;
top:50px;
left: 5%; 
z-index:-100;
filter: brightness(100%);
background-size: 25%;
background-repeat: no-repeat; 
background-image: url("https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/z4Ail4Md63ErhOguc9bo/pub/t7LwU3WnmnMGtFKkuCWX.png"); 
}
</pre></span></style>

I changed it a bit to keep it simple and able to adjust the brightness of the image.

1 Like

Add opacity: 0; in this section

[data-test=“glide-app-bar”] :nth-child( 1 ) {
backdrop-filter: opacity(0);
background: transparent;
opacity: 0;

1 Like

Thks and enjoy your Sunday.
I didn’t think the logo will be more pbmatic than the sliding.

Good thing I haven’t set it in production app. I’ll make a proof video for my exams just in case Glide / browser bugs at the bad time…

Let’s wait how Glide is going these days. Seems lots of continuous deliveries are coming. Luckily, maybe sth simple will come up to solve / be even better than the header logo title customization. The Sharon logo is done only with Poppins font. I could spare a PNG if this Google font is supported one fine day.

1 Like