Centering a logo in Nav bar

I’ve looked at the thread on this topic which has not helped me, unfortunately. I’m a beginner (which might be interpreted as moron in this case). I’m trying to place a logo top centre of the viewport while using the ‘hamburger icon’ – with specified size and position – to enable page navigation via a drop-down menu. I want the navigation and logo fixed at the top of the viewport (without a margin above it). I’ve failed to achieve the combination of these requirements.

As a separate but related topic, I’ve been using, successfully, viewport width % (VW) to achieve the responsive design I want over device resolutions. For a reason I can’t figure, I can no longer specify the logo size using VW (whereas I had before).

I’ve attached (I hope) a jpg of what I what I’m trying to achieve.

I’d sure appreciate help on this because I am stuck right at the starting point.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Do you want the hamburger menu active for desktop, tablet and mobile view?

First take the menu out of the container. I’ll do a quick video with steps that you can follow to center it all…

There are a number of ways to do this. I’ll share this method:

Now the icons and logo will conflict a little, if they are different sizes. I would recreate them in your graphic editor; Photoshop, Inkscape, Affinity, etc, and use the same template size. Probably, 80x80 or something like that. This will give each icon the same width and height on either sides, so when you load them into WF, their dimensions won’t push things around randomly.

You will have to tweak icons a little for each device view. But this format will give you greater flexibility. Hope this helps ya out. Let me know if you need anything else.

Hey Gary

That’s quick!

Yes hamburger menu active for all views.

I’ll take the menu out of the container now.