If you’ve designed a sticky header in Oxygen Builder 6, you’ve likely encountered the "Invisible Header" bug. When logged in, the WordPress Admin Bar sits directly on top of your navigation, obscuring your logo and links.
While this is a common annoyance, the fix requires understanding how WordPress handles different screen sizes. Here are two ways to solve the overlap: the Performance-First CSS method and the Responsive JavaScript method.
Why the Overlap Happens
The WordPress Admin Bar isn't a fixed height; it’s a moving target. To maintain touch-friendly targets, WordPress changes its height based on the device width:
- Desktop (>782px): Exactly 32px high.
- Mobile (≤782px): Expands to 46px high.
- Small Screens (≤600px): On many setups, the bar becomes absolute or moves, which can create a random gap if not handled correctly.
Solution 1: The "Performance First" CSS Way (Recommended)
This is the cleanest method for SEO and site speed. By using the .admin-bar class that WordPress automatically adds to the <body> tag, we can adjust the navbar position before the browser even finishes rendering the page.
The Benefit: Zero Cumulative Layout Shift (CLS). There is no "flicker" because the browser doesn't have to wait for a script to run.
CSS
/* Apply top margin only when admin bar is present */
.admin-bar .navbar {
top: 32px !important; /* Standard Desktop Height */
}
/* Adjust for Mobile (WP admin bar jumps to 46px at 782px width) */
@media screen and (max-width: 782px) {
.admin-bar .navbar {
top: 46px !important;
}
}
/* Handle very small screens where admin bar might become absolute */
@media screen and (max-width: 600px) {
.admin-bar .navbar {
position: relative; /* Or adjust top if navbar is fixed */
}
}
Solution 2: The JavaScript Way (Responsive & Dynamic)
If your navbar height changes dynamically or you prefer a "set it and forget it" approach that measures the bar in real-time, JavaScript is the way to go. This script uses a resize listener to ensure that if a user rotates their phone or resizes their browser, the offset updates instantly.
JavaScript
jQuery(document).ready(function($) {
function adjustNavbarForAdminBar() {
var $wpAdminBar = $('#wpadminbar');
var $navbar = $('.navbar');
if ($wpAdminBar.length && $wpAdminBar.is(':visible')) {
var adminBarHeight = $wpAdminBar.height();
$navbar.css('top', adminBarHeight + 'px');
} else {
$navbar.css('top', '0');
}
}
// Run on load
adjustNavbarForAdminBar();
// Run on window resize (Handles mobile orientation changes)
$(window).on('resize', function() {
adjustNavbarForAdminBar();
});
});
Performance Tip: Why CSS Wins for SEO
While the JavaScript method is highly accurate, it has a slight drawback: the "flicker" effect. Because the script has to wait for jQuery to initialize, the header may sit at the very top for a fraction of a second before "snapping" down into place.
For high-performance sites, the CSS method is superior because it prevents this layout shift, keeping your Core Web Vitals in the green.
If you are following an older Oxygen tutorial, you might notice a common instruction: "Go to +Add > WordPress > Sidebars." But in Oxygen Builder 6, many users find that the "Sidebars" category is missing entirely. This happens because Oxygen is "Theme-less"—since it replaces the theme, WordPress sometimes doesn't realize you want to use classic widget areas.
Here is the skillful way to register and display custom sidebars in the modern Oxygen environment.
Step 1: Registering the Sidebar (The Foundation)
Before Oxygen can display a sidebar, WordPress needs to know it exists. Since you don't have a functions.php (because Oxygen disables your theme), you should use a plugin like Advanced Scripts or Code Snippets to run this PHP:
PHP
<?php
add_action( 'widgets_init', 'register_custom_oxygen_sidebar' );
function register_custom_oxygen_sidebar() {
register_sidebar( array(
'name' => 'Oxygen Custom Widgets',
'id' => 'oxygen-custom-widgets',
'before_widget' => '<div class="widget-wrapper">',
'after_widget' => '</div>',
) );
}
Once this is saved, you can go to Appearance > Widgets in your WordPress dashboard and you will see your new "Oxygen Custom Widgets" area ready for content.
Step 2: Why the "Sidebars" Element is Missing
In Oxygen 6, if the builder doesn't detect a traditional theme structure, it simplifies the +Add menu.
You might see a Widget element, but this usually forces you to pick a single widget (like a search bar or a calendar). If you want to display the entire area you just registered, the standard Widget element feels limiting.
Step 3: The "Skillful" Solution – The Code Block Method
The most reliable way to display a sidebar in Oxygen 6 is to use a Code Block. This bypasses any UI bugs and gives you full control over the HTML wrapper.
- In Oxygen, click +Add > Basics > Code Block.
- Navigate to the PHP & HTML tab.
- Paste the following logic:
PHP
<?php if ( is_active_sidebar( 'oxygen-custom-widgets' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'oxygen-custom-widgets' ); ?>
</div>
<?php endif; ?>
Why this is the preferred method:
- Clean Output: It only renders the
<div>if the sidebar actually has widgets in it (preventing empty white space). - Zero Dependencies: You aren't relying on Oxygen’s internal "WordPress" category elements which can change between versions.
- Full Control: You can easily change the CSS IDs or classes to match your site's styling.
Summary Table: Which Element Should You Use?
| Method | Best Used For... | Why? |
| Widget Element | Single Items | Best for placing one specific tool (like a Search bar). |
| Shortcode Element | Quick Fixes | Good if you use a plugin that provides a sidebar shortcode. |
| Code Block | Complete Sidebars | Recommended. The most stable way to render a full Widget Area in Oxygen 6. |
Export to Sheets
Final Thought
Oxygen Builder 6 gives us more power, but it requires us to be a bit more intentional with how we handle "legacy" WordPress features like Sidebars. By registering your own area and calling it via a Code Block, you create a future-proof setup that won't break during the next update. Once Oxygen Builder Dev's make a fix this will surely become redundant. After creating add widgets from the appearance > Customize screen which gives somewhat a tolerable control.
Speed is the heart of a great user experience, but sometimes performance tools and page builders don’t play nice. Recently, while optimizing a site powered by Oxygen Builder 6, I ran into a wall: the builder's dynamic elements and certain AJAX-based functions stopped working as soon as LiteSpeed Cache (LSCache) was activated.
Here is the "skillful" journey of how I diagnosed the issue and why ESI (Edge Side Includes) was the key to the solution.
The Problem: Breakage Under Pressure
After enabling the "Aggressive" optimization profile in LiteSpeed, Oxygen Builder 6 began throwing errors. Dynamic content wasn’t loading, and certain save functions in the builder were failing.
At first glance, it looked like a JavaScript minification issue. However, standard exclusions didn't fix it. It was time to dig deeper.
The Diagnostic Path
I followed a systematic "Isolation" workflow to stop guessing and start knowing:
- The Bypass Test: By appending
?LSC_PAGESPEED_NOOPT=1to the URL, I confirmed the issue wasn't just CSS/JS minification. - The Module Isolation: I began disabling LSCache features one by one. When I toggled ESI (Edge Side Includes), the builder immediately sprang back to life.
- The Culprit: ESI is designed to serve dynamic "holes" in a static page. The error was happening because Oxygen Builder 6 relies on Nonces (security tokens) for its AJAX requests. When ESI was active, these nonces were being cached, becoming "stale" and invalidating the security check.
The Solution: Punching a Hole for ajax_nonce
Instead of disabling ESI entirely—which would hurt performance—the "skillful" fix was to tell LiteSpeed which specific security tokens must remain dynamic.
Step-by-Step Fix:
- Navigate to LiteSpeed Cache > Cache > ESI.
- Ensure Enable ESI is set to ON.
- Scroll down to the ESI Nonces text area.
- Add
ajax_nonceon its own line.- Note: For Oxygen Builder 6, this is the specific handle used to validate front-end and builder-side requests.
- Click Save Changes and Purge All cache.
The Result
By adding ajax_nonce to the ESI Nonces list, LiteSpeed now treats that specific security string as dynamic content. While the rest of the Oxygen-built page remains lightning-fast and statically cached, the security token is refreshed for every visitor, ensuring that AJAX functions never fail.
Pro-Tip for Oxygen Users
If you continue to see issues with specific Oxygen elements (like dynamic tabs or filtered galleries), check your browser console. If you see a 403 Forbidden error on an AJAX call, you likely have one more nonce handle to add to that list!
Additionally you can read into https://www.ibrahim-jaber.com/litespeed-cache-exclusions-for-oxygen-builder/ and apply them, but adding three extra
builder
oxygen
?oxygen=builderWooCommerce can be modified in many different ways. Using oxygen builder you can get the most out of your WooCommerce and modify it to its core. The below steps show how to make your WooCommerce cart total in a ajax format. You can use the element literally anywhere for your needs.
- Add a codeblock
- Insert the follwing into "PHP & HTML":
<div class="cart-count"> <?php echo WC()->cart->get_cart_contents_count();?> </div>
- Install you favourite code snippets plugin like - Advanced Scripts
- Create a New PHP Snippet / PHP Script
- Insert the following into the "Code"-section:
add_filter('woocommerce_add_to_cart_fragments', function($fragments) {
ob_start();
?>
<div class="cart-count">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</div>
<?php $fragments['div.cart-count'] = ob_get_clean();
return $fragments;
});
- Now you can give you snippet a name and save it.