Code Help—Hoping to extend my logo and maybe move navigation overtop

The header-specific logo I designed for my client (attached) has a horizontal line extension on each side—hoping to make this the full width of the site. I have tried the code below and while it does make it larger, it translates weirdly to the mobile (shows two logos, and two hamburger menu elements). Looking for a better option here.

Also—not sure if this is possible, but I am moving this over from Wix, where I was able to tuck in the navigation menu items underneath these lines, for a more pleasing look.  The logo is a PNG, and I'm wondering if I can have the menu items overtop the logo to achieve this. Or would that just lead to some funkiness down the road...let me know. Thanks!

.header-title-logo img {
    height: 50rem;
      object-fit: contain;
    width: 100%;
    height: 320px;
}

.header-display-desktop {
    display: block;
}

What is your site url? We can check and help easier