As far as your navbar goes, I would just redo the layout. Instead of the flex layout for your nav element, I would use grid. It will be a better fit for the layout you’re going for…
So start with a base div block with a set height of something like 60px, but set the display to grid. Don’t forget to make it fixed positioning with a high z-index so it is always over your other elements. Next make sure that the relative positioning is set to top, so that the navbar now takes the full width of the screen. Make your grid have three columns, one row. You will use the left cell for the first 2 navlinks, the middle cell for your logo/link, and the third cell for your last 2 navlinks.
Set the size of the first cell to 1FR, the second second to 60px (or however large you want your logo to be), and the third to 1FR. Now add a div block to the first cell and name it something like “navlink wrapper”. Next add a link block to the middle cell. Finally add a div to the right cell with the same class as the first, e.g. “navlink wrapper”. You’re now ready to add your links and logo.
For the “navlink wrapper” class, set display to flex with a horizontal direction and alignment and justification set to “center”. Then add your links with the class “navlinks”. For these links, set a margin on the links something like 4.5 vw. You can then add all your cool text styling like the neat hover animation!
For your logo/link in the center, set the display of the link block to flex and align and justify center.
Then merely add the image of you logo to your link block. Do not do this using background image, add an actual image element. That way if you want to change the size of the logo, just change the width and height properties of the image element.
This should make your navbar responsive. It will get cramped on mobile breakpoints, but you can alleviate this by making the text smaller and lessening the margin on the links. However, I would recommend you use a hamburger menu once you get to mobile breakpoints. It will make it much easier for your users to read and be able to click the links they want. I know it seems sort of standard, but there are ways to customize it to look more unique.
Responsiveness can be a bit tricky, especially if you’re like me and change your design as you go along . Hope this helps you out!