đź—ş Build Better Navigation

Thank you; in general, I like to avoid CSS, but I will make an exception in this case!

Agreed. I use CSS when it improves user experience.

2 Likes

Yes, and it doesn’t always.

Here, it works great to freeze the top buttons, but my floating button gets pushed off the screen. You can just see the rounded corner of it here:
image

I found this on another post and it worked right… Go figure. Another reason I don’t like using CSS – I don’t know how it works!


div[id*='screenScrollView'] > div > :nth-of-type(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
background: white;
z-index: 3;
}

AAAAnd sheesh. Went to another tab in my browser and when I came back, all the objects on my new tab were gone – and somehow replaced with other objects. No, I really DO NOT like CSS…

image

Looks like you replaced your details style layout with a calendar style layout. If you reselect Details, do the components come back?

1 Like

Thanks Robert, I actually didn’t select anything; I went to another browser tab to check the weather, and then when I came back to my app tab it was like that. I quickly selected, “Discard Changes” so I wouldn’t have to find out what else in my app might have been compromised, so I didn’t investigate further.

It’s weird if it automatically converts to a list-based layout like that. It is a Glide setting, not something that would be related to CSS, I think.

Ya…def not related to CSS

1 Like

The last one is so creative!

As always, thanks for posting (:

1 Like

Hi Robert, I really didn’t mean to distract from this thread. It was only semi-related…

I found a post where @Jason was saying they want CSS examples so they can incorporate things into Glide to “make it less prone to insane breakages”.

Not sure how that fits in with what I experienced. I have re-implemented it and so far so good.
image

Great video - thanks!

Inspired a bit of experimentation….

Eliminating the standard tab menu across the bottom makes for a cleaner experience and allows the tabs to breath with a full screen mode…

2 Likes

Hi Bob

Loved the video - very useful.

I’m relatively new to Glide and I’m seeking guidance on how to use the legacy button options that I’ve selected for each screen within my app in stead of the hero icon option you used for the main menu.

Is this possible? Any advice or pointers would be greatly appreciated! Thank you in advance.

Can you explain what you mean by “legacy button options”?

Glides gives the option to select either glide icons or legacy icons. I select legacy icons that fits with theme of the app. The icons reflects as navigation buttons at the bottom of the screen but I have to many and need to create a menu to display all the screens. I want to use the same buttons on the main menu.


image

I’ve included some images.

When you create a new tab, you have the option to choose from Glide icons or legacy icons as the tab icon.

You can move the tab from the navigation bar to the hamburger menu by dragging the tab to the menu section (Layout Editor > Tabs in the upper left).

In the options of the tab (right pane), you also have the option to hide to tab entirely from navigation.

Thank you @nathanaelb but it seems as if I am not explaining my question very well. In the tutorial @Robert_Petitto did, he explained creating a home menu using hero icons. Something like the following:

image

I want to know if it is possible to replace the hero icons with the legacy icons I’ve selected as the tab icon.

Okay understood.

I would say that you cannot natively use the same icons for the tab icon and icons generated in the Hero Icon column (if this is what you mean by hero icons).

The reasons is that one is a navigation bar whose icons are provided by Glide (the exact source of these icons I do not know), and the other is a collection whose images are sourced by a Hero Icon column and heroicons.com.

Of course there could be an overlap between these two sources (Glide’s tab icon and heroicons.com), but I think it would just be luck. This is what I mean by “you cannot natively use the same icons”: you might but it’s not guaranteed.

Ya…no way to do this because you’d need to select the icon in the data editor. Unfortunately, we don’t have a way to select icons in the data editor apart from the Hero Icon plugin.

1 Like

I believe this was and may still be the source of the legacy icons.

I would just download the images you need, upload them to glide, and use them that way.

Or you could grab images from FontAwesome or some other service which will also be similar.

3 Likes

Thank you All
This answered my question.

1 Like