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