▼
Streaming live at 10am (PST)

How do I align notification popups beneath navbar?

#1

Hi all -

I am using the webflow navbar component, and i want to implement a notification popup. the notifications 'pop out of' an icon in the navbar, but i can't figure out how to make its positioning responsively align with the icon.

I tried setting up a fixed position 'notifications section' beneath the header, then positioning w/ columns, but it interfered with buttons in the top section of the page.

Considered making a new div with icon and notifications that straddles on- and below the navbar, but suspect that'll meet w/ same complications as the notifications section approach.

Here's my public share link.

screen snip:

Capture.PNG1646x480 219 KB

#2

Hi,

Try it. Set for Div block "position: relative" and set the position of notifications relative this div block.

#3

thanks. i was able to get the positioning visually correct, but there's still the problem with not being able to interact with objects beneath the notification div, even when it's transparent.

Any easy fix for that?

#4

I don't understand what effect you want to achieve.

#5

sure, so basically I just want a little tooltip to popup when the user hovers over a certain icon. That part works fine, but the problem is the space where the tool tip sits has other elements in it. when the tooltip isn't visible, i can see the elements, but cant' interact w/ them--presumably b/c the tooltip div is ontop.

is there another way besides opacity to achieve a disappear/reappear effect without blocking the items on lower layers?

#6

It seems understood.
Try this http://prntscr.com/9e6km1
Or this http://prntscr.com/9e6le6

#7

perfect--I opted for the display:none, looks like it's done the trick.

Thanks very much Eka!

closed #8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.