Help! How to develop this UI
After working on a whole day I couldn't develop this. It's very complex. This is a React project. Developing these two navigation bars quite difficult. I couldn't imagine how should I develop html structure and how can I achieve this with css. Can anyone give me a guide or a hint, I really appreciate it. 🤗
Live link : https://www.shangri-la.com/en/colombo/shangrila/
Luxury Hotel in Colombo | Shangri-La Colombo
Our well-situated luxury Shangri-La Colombo offers exquisite rooms, suites and extensive dining choices with heartfelt and thoughtful service.
6 Replies
Build the dropdown container separately and then display it on hover
@vince Same thing I have done.. two problems araised.
1. When cursor left the nav item to click the item from dropdown, dropdown container disappeared, becz navitem left the hover effect.
2. When dropdown pops up, slider from the behind get down. Try to achieve with z-index but does not work. 🥺
What do you mean by number 2?
For number 1 you just gotta select it in your css.
Here's a codepen I made a while back: https://codepen.io/vince1444/pen/vYvBGLx
Thank you for the example.. 🤗
What I meant by number 2 is when dropdown menu pops up, it should be in the top from the z stack, the slider should be behind it. Now what happens is when the dropdown pops up it rendered in between the navbar and the slider. 🥲 (z-index) did not work..
oh huh.. I'd have to see your code, can you put it in a codepen?
I saw the msg now... it"s okay... I figured it out... I didn't even no what the concept is.. My method was completely wrong. I learnt how to develop a Mega Menu.. ☺️
@vince Thank you so much for helping me out... 🤗