In this tutorial, we'll discuss creating a header menu with a centered logo for your WordPress website using Oxygen.

We'll start by adding several elements to the page: A section, Site Navigation, Link Wrapper, and an Image element. If you're using Oxygen's Emmet integration, copy and paste the following text into Oxygen:

Next, we'll modify the styles for each element to make everything look nice and place the Link Wrapper element between the menu items of the Site Navigation element.

Then, we'll add some custom CSS in an Oxygen Stylesheet to ensure the centered logo fits nicely within the rest of the menu. We'll also learn how to use CSS media queries to change the design based on the user's screen size. The following CSS should work for a menu with six top-level items and the Site Navigation element. Depending on your menu size and site, you may need to customize this further.

Video Table of Contents: 

• 00:00 Introduction
• 00:44 Adding and Styling the Elements
• 02:25 Centering the Logo in the Menu
• 05:26 Making the Design Mobile-Friendly
• 06:02 Final Thoughts.

Resource(s): 

• Media Queries (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
• The Admin Bar article/experiment about "Home" link vs. logo link: https://theadminbar.com/should-you-include-a-home-link-in-your-website-navigation/