Clickable Icon at the Navigation drawer/Side bar Menu

Ask for Help
1

Hi everyone,

I’m trying to add a notification icon to the top right corner of my Glide app, aligned with the existing sidebar menu icon on the left. However, when I align the notification icon to the same position as the sidebar menu icon, it becomes non-clickable.

Here’s what I’ve tried so far:

• Aligning the notification icon using Glide’s design options.

• Ensuring there’s no overlapping element or container in the area.

I suspect the issue might be related to how Glide handles alignment or touch areas for these icons.

Has anyone encountered this before? Any tips on how to ensure both the sidebar menu icon and the notification icon are clickable when aligned at the top of the page?

Thanks in advance for your help!

Screenshot 2024-11-28 at 11.00.27 AM
Screenshot 2024-11-28 at 11.00.27 AM530×162 12.6 KB

2

You may need to adjust the z-index so the icon is brought to the top. It may be sitting underneath a transparent bar at the top of the screen.

3

Hey Jeff!

I did Z-index too. It did went up but the issue is that it becomes non clickable. Only when I move it lower, it becomes clickable. Somehow, it is colliding with the sidebar menu icon.

4

Hmm, not sure then.

1 Like
5

Might have to ask @Himaladin about this.

2 Likes
6

Screenshot 2024-11-28 223240
Screenshot 2024-11-28 223240420×281 20.9 KB

The following CSS method changes the header from 3 columns to 2 columns while also reducing the total width by 56px so you can insert your own button. Here, I assume you’re using the block button component from Glide, and it’s only for mobile view.
Use a container to wrap the button and give it a class name (notif-container).

/*Insert Container*/
#page-root:has(.mobile-layer) .notif-container   {
position: sticky;
top: calc(-162px + var(--safe-area-inset-top));
margin-top: calc(-2 * var(--safe-area-inset-top));
margin-bottom: var(--safe-area-inset-top);
z-index:22;
height:110px;
padding-top:50px;
}

/*Reduce total width by 56px*/
#page-root:has(.mobile-layer):has(.notif-container) #nav-root {
  width: calc(100% - 56px);
}

/*Set 3 columns into 2 columns*/
#page-root:has(.mobile-layer):has(.notif-container)  #nav-root header > div {
  grid-template-columns: 56px 1fr; 
}
6 Likes
7

Was attempting to use this CSS trick but my button component doesnt stay in place when scrolling:

image
image2036×1089 152 KB

1 Like
8

Apologies, I didn’t notice that earlier. Besides changing the position to sticky, it turns out that after reducing the width of the header, there is still a second layer used as the background for the header. This layer is a scrollable element located under a different parent in the DOM, specifically #main-root [data-testid="wire-container"]:first-child.
I have revised the script above accordingly. Thank you for your input.

3 Likes
9

Found some issues with original CSS, as the #main-root container stops at a certain point on mobile. Updated code (Colors the Button Icon):

/*Insert Button Into Nav*/
#page-root:has(.mobile-layer) .notifBtn  {
position: sticky;
top: calc(-98px + var(--safe-area-inset-top));
margin-top: calc(-1 * var(--safe-area-inset-top));
margin-bottom: -18px;
z-index:2222;
}
/*Button Color*/
.notifBtn svg {color: #FFF;}

#page-root:has(.mobile-layer) .notifBtn .has-icon-left.md {
gap:0;
}


/*Reduce total width of Nav by 56px*/
#page-root:has(.mobile-layer):has(.notifBtn) #nav-root {
  width: calc(100% - 56px);
}

/*The second layer background*/
#page-root:has(.mobile-layer):has(.notifBtn) #main-root > div:nth-child(1) {
position: sticky;
top: -102px;
z-index: 22;
}

/*Set 3 columns into 2 columns*/
#page-root:has(.mobile-layer):has(.notifBtn)  #nav-root header > div {
  grid-template-columns: 56px 1fr; 
} 

/*Make Second Background Stay Sticky*/
#main-root {min-height: fit-content;}
1 Like
10

Okay, it seems like we can’t rely on the background behavior of the scroll screen. So it would be better to wrap the button component with a container (notif-container) so that it can have its own background to insert into the reduced-width tab navigation. I revised the code in only one place so that it doesn’t cause errors in the future.

1 Like