I have a navbar that contains a Search field and a Social Network dropdown which both show up below the navbar if they are active. I saw on other websites small "arrows" that connect the second row elements visually with the first one like this:
How can I achieve the same and always make sure that the arrow is also pointing to the correct parent element (visually)? This is my navbar (somehow the JavaScript doesn't work):
I have a navbar that contains a Search field and a Social Network dropdown which both show up below the navbar if they are active. I saw on other websites small "arrows" that connect the second row elements visually with the first one like this:
How can I achieve the same and always make sure that the arrow is also pointing to the correct parent element (visually)? This is my navbar (somehow the JavaScript doesn't work): https://play.tailwindcss./qksxyrh24P
Share Improve this question asked Sep 29, 2021 at 14:48 PelekePeleke 9613 gold badges11 silver badges26 bronze badges1 Answer
Reset to default 31>>create a div with same height and width and rotate it by 45 deg.
2>>make it's postion absolute z indiex of 2 and same color as your dropdown field
3>> make sure to add some space between your search field and dropdownfield
4>> use top left properties to place it appropriatly
5>> then just add show class that you are using to show or hide the dropdown link
https://jsfiddle/t5mfs1hy/