How to make such a menu adaptively?

Question

css

I found a layout, I want to make it up, but I don’t understand how to do it right.
There is such a menu.
i.imgur.com/Buvp9E5.png
It all breaks down like this:
i.imgur.com/MJA1TRA.png
Actually, I glued the big circle, the white line and the logo into one picture.
I just put the navigation links in nav>ul, and I want to make the shadow under the white line simply through the inner shadow of the ul.
I don’t know how to position it, how to make all this happiness adaptive.
Please tell me hmm, algorithm, or something, how would you do it?

Answer 1

Sketched an adaptive view for the size of smartphones (320px).
But I would advise you to make up for all these forms over the menu through SVG than to expose images. This makes it easier to change forms for different screens.
If SVG interests, I can show an example tomorrow.

Answer 2

mb, you need to make all these elements pseudo-elements for the menu?