Crazy shaped navigation menu

Question

I'm currently developing a website as my practice work for a client. My problem is that I can't get my hands on the navigation that the client wanted. Menu should roughly look like this

I have tried: just pixel positioning(not responsive, so nope...), a curved path and links attached to it(didn't work out for me. Probably because I'm a beginner) and just divs, but that's also terrible.

I have tailwind installed on this project too, if that's somehow better then vanilla css for this menu.

The svg wave(if someone wants)
<svg width="1920" height="300" viewBox="0 0 1920 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1920 300H0V0C435.72 154.841 831.391 213.662 1920 247.761V300Z" fill="#1D4ED8"/></svg>

So any ideas or snippets how I should create this masterpiece? Thank you!

Answer 1

A straightforward way of positioning the nav list elements is to put each one in place x% from the left of the background image and y% from the top. That way even if you don't know the mathematical shape of the curve, or indeed if there isn't one and it's just any old image which requires the elements to be placed around it, the whole will be responsive.

The snippet below creates this:

but the position of any of the elements can be changed by changing the CSS variables --t and --l. These were obtained by measuring the distance from the top and left of each and measuring the width and height of the image. (It doesn't matter in what units you measure, as long as you use the same ones for everything). CSS calc then works out the percentages.

To make sure of responsiveness the font-size is set relative to the viewport width. In practice you would probably want to ditch the design and put a hamburger menu up for very narrow devices.

 * { margin: 0; padding: 0; } nav { --svgw: 1920;/*the builtin width and height of the svg */ --svgh: 300; position: relative; width: 100vw; height: calc((100vw * var(--svgh)) / var(--svgw)); } svg { position: absolute; top: 0; left: 0; width: 100vw; height: calc(100vw * var(--svgh) / var(--svgw)); z-index: -1; } nav ul { list-style-type: none; position: relative; height: 100%; width: 100%; } nav ul li { display: inline-block; position: absolute; color: white; top: calc(((var(--t) + 0.3) / 2.6) * 100%);/* 2.6 was the height of the img when measured 0.3 is the amount from the top of the curve of the first item */ left: calc((var(--l) / 17.5) * 100%);/* 17.5 was width of the img when measured */ font-size: 1vw; } /* for each li item, --t is measurement from top and --l is from left */ nav ul li:nth-child(1) { --t: 0.3; --l: 0.5; } nav ul li:nth-child(2) { --t: 0.6; --l: 1.7; } nav ul li:nth-child(3) { --t: 0.9; --l: 3; } nav ul li:nth-child(4) { --t: 1.2; --l: 4.4;} nav ul li:nth-child(5) { --t: 1.4; --l: 6.1;} nav ul li:nth-child(6) { --t: 1.6; --l: 7.6;} nav ul li:nth-child(7) { --t: 1.7; --l: 9; } nav ul li:nth-child(8) { --t: 1.8; --l: 10.5;}

 <nav> <ul> <li>AVALEHT</li> <li>CONTAKT</li> <li>TASUD</li> <li>EESKIRJAD</li> <li>URITUSED</li> <li>VISIOON</li> <li>GALERII</li> <li>TANAME</li> </ul> <svg width="1920" height="300" viewBox="0 0 1920 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1920 300H0V0C435.72 154.841 831.391 213.662 1920 247.761V300Z" fill="#1D4ED8"/></svg> </nav>