After reviewing the screenshot you provided, there are a couple of approaches you could take to address this issue. The complexity of the solution depends on how you are incorporating the background graphic. If the background image resizes, the offset required for each navigation item will vary slightly.
Here are two straightforward solutions:
ul {
display: flex;
}
li {
list-style: none;
margin: 0 3rem;
position: relative;
width:100%;
}
li:nth-child(2) {
top: 20px;
}
li:nth-child(3) {
top: 40px;
}
li:nth-child(4) {
top: 50px;
}
li:nth-child(5), li:nth-child(6), li:nth-child(7), li:nth-child(8) {
top: 60px;
}
<nav>
<ul>
<li><a href='#' title=''>Link</a></li>
<li><a href='#' title=''>Link</a></li>
<li><a href='#' title=''>Link</a></li>
<li><a href='#' title=''>Link</a></li>
<li><a href='#' title=''>Link</a></li>
<li><a href='#' title=''>Link</a></li>
<li><a href='#' title=''>Link</a></li>
<li><a href='#' title=''>Link</a></li>
</ul>
</nav>
The first solution is a simple approach where you can adjust the positioning of items using nth-child. This method would be cleaner if you are using SCSS, as you could use an iterator for this purpose. However, to make it fully responsive, you may need to incorporate media queries at different breakpoints to align the background curve with the links.
For the JavaScript approach:
let endingCurve = 80;
let currentCurve = 0;
let navItems = document.querySelectorAll('li');
let offsetPerItem = (endingCurve / navItems.length);
navItems.forEach(item => {
currentCurve = currentCurve + offsetPerItem
item.style.top = `${currentCurve}px`;
});
ul {
display: flex;
}
li {
list-style: none;
margin: 0 3rem;
position: relative;
}
<nav>
<ul>
<li><a href='' title=''>Link</a></li>
<li><a href='' title=''>Link</a></li>
<li><a href='' title=''>Link</a></li>
<li><a href='' title=''>Link</a></li>
<li><a href='' title=''>Link</a></li>
<li><a href='' title=''>Link</a></li>
<li><a href='' title=''>Link</a></li>
<li><a href='' title=''>Link</a></li>
</ul>
</nav>
In this JavaScript solution, you set an ending curve, determine the number of items in your navigation, and calculate the offset per item based on the curve. Then, you iterate through each item and apply a top style to adjust the position. This method is similar to using nth-child in CSS but with the flexibility to modify the ending curve value for different effects.
There are more advanced JavaScript solutions that could be developed with additional information, such as whether the background image curve is fixed, scales with the browser, or is in a specific format like SVG. Nonetheless, these approaches should provide a good starting point for your implementation!