Building a professional-looking header is crucial for any website. It’s often the first thing visitors see, setting the tone for their entire experience. If you’re an Oxygen Builder enthusiast, you might be wondering how to craft a functional and stylish header in Oxygen 6 without relying on additional extensions like the Breakdance Elements Addon. Good news! It’s entirely possible, and this guide will show you how.
We’re diving deep into creating a header using only the core Oxygen 6 plugin. This approach gives you granular control and a deeper understanding of how Oxygen works under the hood. Let’s get started!
The Core Challenge: Understanding Oxygen 6’s Main Plugin Limitations
It’s important to set the stage: the main Oxygen 6 plugin, unlike the Breakdance extension, doesn’t come with pre-built components for specific header elements like navigation menus or responsive “burger” buttons.
“Because on Oxygen the main plugin doesn’t have a component from Breakdance and I can’t access… these extensions… if you inspect the code of how is built the header of oxygen builder.com you’re going to see that it’s with Breakdance components. So today we we’re going to do this menu, this header from here and it will be a simple header built with the main plugin of Oxygen.”
This means our construction will be more manual, utilizing basic elements like containers (divs), images, and links. But don’t let that deter you – it’s an opportunity to build with precision!
A New Paradigm: Header Creation in Oxygen 6 vs. Oxygen Classic
One of the significant shifts in Oxygen 6 compared to its classic versions is how headers are managed.
“On Oxygen 6… not on template like we did before… yes on Header… Before on Oxygen classic we did all in template now it’s like Breakdance we have separately this part separate.”
In essence, headers are now created as separate “Headers” entities within the Oxygen panel, similar to how Breakdance handles them. This is a departure from embedding them directly within general templates, offering a more modular approach.
Building with Semantics: The Foundation of a Great Header
Even when building manually, adhering to proper HTML semantics is key for SEO and accessibility. Our header construction will focus on this:
- We’ll start with a
<div>container, but crucially, we’ll assign it the semanticheadertag. - Inside, another container will act as a wrapper for our main header content.
- For the navigation menu, we’ll use a
<div>with the semanticnavtag. - The menu itself will be structured using an unordered list (
<ul>) with list items (<li>) for each menu link. This is best practice for navigation.
“Create a container and this container will be a header tag… this is a nav header nav menu okay so this header container need be a… flex… this URL is header you nav you display flex and now we have very well on semantic.”
This conscious effort ensures your header is not just visually appealing but also meaningful to search engines and assistive technologies.
Styling Your Header: CSS Classes and the Quest for Variables
Consistent styling is vital. Oxygen 6 allows for the use of CSS classes to apply styles uniformly.
During the process, the idea of using Oxygen’s variables/collections feature for managing colors and font sizes globally was explored. While this is a powerful feature for site-wide consistency, the session noted that applying these variables might sometimes require manual application to each element or further exploration of global settings.
“We can do this with variables directly… variables new collections colors… well this will be global settings maybe… maybe we can do a tutorial doing Global styles with variables and work with that.”
This highlights an area for potential deeper dives in future tutorials!
Deconstructing the Header: Element by Element
Let’s break down how specific header elements were tackled:
The Logo: Your Brand’s First Impression
- The session demonstrated inserting a logo.
- A key tip: enable SVG uploads in Oxygen’s advanced settings if you plan to use SVG logos.
- While the SVG element in Oxygen was tested, an Image element was ultimately used for the demonstration, hinting at potential ease-of-use or specific context limitations with the direct SVG element at that moment.
Mastering Space and Structure: Padding and Max-Width
- Applying padding to the main header container for comfortable spacing.
- Setting a max-width for the header content to ensure it looks good on wider screens.
- The idea of creating a reusable component for this max-width container was suggested for efficiency.
Click-Worthy Buttons: Styling and Hover Effects
- A button was created with specific styles:
- Custom background color
- Padding
- Border-radius
- A hover effect with a smooth transition was also added, enhancing user interaction.
Navigating with Style: Menu Item Customization
- Menu links received their own styling:
- Color
- Font size
- Uppercase transformation
- A hover effect was also applied to menu items for visual feedback.
The Responsive Reality: Adapting Without Dedicated Components
Making a header responsive is non-negotiable. Here’s how it was approached without Breakdance’s dedicated components:
- The header’s layout was adjusted for tablet and mobile portrait views.
- Limitation Noted: Without a “burger menu” component (which Breakdance provides), implementing a truly slick mobile menu is challenging. The existing elements were rearranged (e.g., stacked or wrapped).
“Mobile responsive okay this is okay tablet maybe we need put stack… okay this is not the best for UI but we have the header, the logo, the buttons… Some of stuff that we miss about that is the Breakdance elements to do maybe a burger button because to do this burger button we need a custom tutorial… or need import any library but the idea is to do with the thing that Oxygen give us for now.”
This is a crucial point: for a truly refined mobile menu experience with a burger icon, you’d typically need those specialized components or custom code.
A Welcome Improvement: CSS Handling in Oxygen 6
A positive takeaway was the improved CSS application workflow in Oxygen 6 compared to Oxygen Classic.
“Now works now this is doesn’t work like Oxygen… it’s better, Oxygen Classic sorry, it’s better because before on Oxygen Classic the CSS we need put directly the attributes and you cannot put at the classes so it’s okay.”
Previously, in Oxygen Classic, CSS often required direct attribute input. Oxygen 6 appears to have a better integration with classes, streamlining the styling process.
Key Takeaways and What This Means for You
So, what can we conclude from this deep dive into manual header creation in Oxygen 6?
- It’s Possible (and Empowering!): You can create a functional header using only the core Oxygen 6 plugin. This requires more manual work but offers great control.
- Semantic HTML is Your Friend: Even with manual builds, prioritize correct HTML structure for SEO and accessibility.
- Responsive Limitations Exist (Natively): Complex responsive features like “burger menus” are significantly easier to implement with extensions like the Breakdance Elements Addon or custom coding.
- Global Styles & Variables Show Promise: While perhaps not perfectly intuitive in all aspects during the session, Oxygen 6’s global styling capabilities are worth exploring further for site-wide consistency.
This method is perfect if you want to minimize plugin reliance or truly understand the building blocks of your Oxygen site.
What’s Next? Stay Tuned!
This exploration of header creation is just the beginning. Based on the original session, here’s what you might look forward to:
- A tutorial on creating a footer.
- Potentially, a more in-depth guide on global styles and variables in Oxygen 6.
- An offer to download the JSON template of the constructed header for those who engage (e.g., comment).
Want to be the first to know about future tutorials and grab exclusive resources? Consider subscribing to the newsletter for timely updates and perhaps even a special gift!
Crafting elements from scratch in Oxygen 6 can be incredibly rewarding. We hope this guide empowers you to build better, more semantic headers for your projects!