CSS Title Bar with clickable images (Logo + Profile) & texts?

Hi 🙋
I see I can override the title bar, hamburger, with CSS background image, customized title.
But can I achieve this?
With 3 clickable zones in a row. Even a 1 row 3 col no borders table?
As if it were html img src + a href:
From left to right:

Left: Col 1 {Logo (click=Home)}
Middle: Col 2 {Title of the screen}
Right: Col 3 {Profile rounded pic (click=edit/sign in)}

I prefer useful graphics, both user friendly but also helpful to tell you where you are, where you have been, where you can go, what you’re expected to click on, suggest the ambiance for focus.

With the back home from the logo, I can spare a tab icon on the bottom menu.
And optimize my screens for access to the sign-in/edit profile from anywhere in as few pixels as possible.

What do you think?

Thks.

You mean all this at the top bar of the screen? I doubt that’s possible.

1 Like

is it the clickable part that is impossible, or the 3 columns layout?

Maybe if the Logo is integrated to the background full screen image (I only need the mobile layout), and say buttons or floating buttons are positioned on top area, without borders ideally, that would do?
The left floating would be transparent over the logo that is in background full screen, and serves as trigger to navigate to home screen.
The right floating would contain the iconized profile pic to edit profile/sign in?
And the Text Title (easier to change per screen) would be the usual CSS with a transparent background.

I can’t remember if you guys can customize icons in floating buttons (with a logo or a profile).
Thks, ThinhDinh

I still think that it’s a lot to tinker around with, and generally I try not to do too much adjusting on that top navigation bar.

Most of my adjustments on that part are related to making it transparent so I can put an image all the way to the top, other than that I try to keep it as it is.

To have separate working parts on a single title bar you would have to:

  • Adjust/replace the current elements of the title bar

  • Add elements that would replace the current ones, and make them visible on that bar (I tried this some months ago with z-index but never succeeded)

  • Configure each of the elements separately to have different actions for them, then join them together in a div or something like that.

That’s too much to tinker and debug if there are some problems, in my opinion.

2 Likes

Ok, thks :slightly_smiling_face:. I’ll follow your wise advice. By instinct, I doubted as well, hence my question. I like it better when it’s reliable and maintenable easily. Dev basic rules. Proritization.

How do you best display till now edit profile and sign-in options?

I like to let users visit freely without signing in (thks Glide, it’s easy to do with Public Access, bless you, guys), until they want to really stay, favorite, compose sth, or see their name everywhere on my app. That’s why my sign in has to be available somewhere, after the user is in my app.

Maybe it would be easier if the hamburger menu & icon can be customized: left or right, and with profile pic if profile + sign in are the only features we want inside. @Robert_Petitto? When I see so many Gliders hiding that hamburger, maybe Glide can do sth to give it more valuable features? And we’ll see the “Hamburger is back - Season 1” :back::soon::sunglasses:, as customizable slide menu?

I mostly don’t use that profile section, instead making a new Profile tab where I add an edit button/enable editing for users to edit their own profile.

For signing in, with public apps I add a button with sign in action at points in the user experience flow that they have to sign in to do something.

1 Like

I can’t resort to tabs, I must limit to 5-6 max in the bottom menu.
For now, I display their name/Invited to sign-in (in French, that sounds better) in a transparent button and they can edit profile/sign in according to their status (Full member with name, New member with email but no name, Visitor/Guest).
So, I just need to reduce margins inside and outside that button (form button, transparent) to optimize screen space.
You can see in the capture of the top part, that it would be nice to reduce space between the fedora hat (links to Q&A, my Help screen), cropped already, and the name (LY MEI here, my name, I forgot the pen icon to show it’s editable).

Can I reduce/set up button margins, padding, whatever it’s called?

But it would have been nice to add their profile pic as thumbnail (here in my current UI as a custom form action icon). So standard, after all.