Published on June 25, 2023

Tutorial: How To Make A Header Menu With A Centered Logo In WordPress With Oxygen

In this video tutorial, Elijah will show you how to design a header menu with a centered logo in Oxygen for your WordPress website.

You can do this by adding a few elements to the page: A section, Site Navigation, Link Wrapper, and an Image element should be sufficient. If you’re using Oxygen’s Emmet integration, copy and paste the following snippet into Emmet:

[gist id=”e409aa723e3ad0c5f3855c40d4dd1e74″ file=”header-menu-centered-logo-emmet.md”]

Next, you’ll learn how to modify the styles for each element to center the logo.

Finally, you’ll write some custom CSS in an Oxygen Stylesheet to finalize the design for the header menu with a centered logo. The following CSS will work with six menu items in the Site Navigation element. You may need to adjust this depending on the number of items in your Site Navigation or the element being used.

[gist id=”e409aa723e3ad0c5f3855c40d4dd1e74″ file=”header-menu-centered-logo.css”]

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): 

The Oxygen Team
Updated on: June 25, 2023

You'll build incredible websites with Oxygen

Get started with Oxygen today and unlock incredible value.

Get Oxygen

30-day money back gurantee

Try Oxygen risk-free. If you’re not satisfied, get a full refund within 30 days.

Unlimited site license

Use Oxygen on as many personal or client projects as you want — no limits.

Fast, world-class support

Our experienced team is eager to assist you with technical questions.

Use on client websites

Build and deliver professional-grade websites for your clients with no extra fees.