Move Logo Position Based on Browser width

I need the logo to be centered in the middle of the navbar. I have created this, but the issue is when the browser resizes, the navbar resizes in the logo and ends up covering the menu items. So the nav bar is responsive but the logo needs to move when the nav bar becomes smaller. is there a way to fix this ?
I added two logos then added this script to hide one logo when document.width is less then 1100px but when I go here to logos are showed

import wixWindow from ‘wix-window’;
// …
$w.onReady(function () {
//TODO: write your page related code here…
.then((windowSizeInfo) => {
let documentWidth = windowSizeInfo.document.width; // 1269
if(documentWidth <1100){