Custom navigation with color switch. Too clunky?

Hi,

I made a custom Navigation. It seems to work fine in different views and is responsive, but I believe it to be too “heavy” and complicated. It took me a while to figure out a solution, that makes it possible to have the navigation covered with a different color when clicking on the hamburger-menu and still looking exactly how I needed it.

  • I used a lot of absolut-positioning, z-index and interactions (Especially inside “navbar 2 wrap”).

I’m hoping for some general suggestions on how to make this design lighter and better. Don’t dig too deep and also there is no need to go into css-naming/style-manager optimization… I know it’s a mess :slight_smile: I’ll clean this up later.

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hiya

I’d try changing from an initial opacity of 0% for the hidden menu wrapper- Rather than switching from hide to show.

Go to 100% opacity over the desired duration.

Same is true for the colour transitions.

This should make the experience smoother.

Thx! I’ll try to see the difference with the opacity changes instead of hide/show.