← All posts

Style the Oxygen Menu Element with Tailwind CSS in Winden

winden

Once you turn off Oxygen's own CSS to use Tailwind CSS, the Oxygen Builder menu element is the one part that breaks. You can't reach its inner parts from the structure panel. In this video we inspect the menu's markup and rebuild the desktop menu, the hamburger toggle and the full-screen mobile menu with Tailwind classes in Winden. You end up with one CSS snippet that you can paste into every future Oxygen project.

Why the Oxygen menu breaks with Tailwind CSS

If Oxygen's styles and Tailwind are both loaded, they fight each other and the page layout breaks. When you disable Oxygen's CSS, the rest of the page looks right again, but the menu element loses its styling. The menu element is also hard to restyle from the builder, because Oxygen doesn't show its inner parts in the structure panel.

In the builder, the menu is a Menu element with Menu Layout set to Horizontal and the main menu selected. On the front end, the menu is just a vertical list of links.

Inspect the menu's real structure

You can only style what you can target, so first we open the browser inspector and look at the markup Oxygen outputs:

  • a nav element with the classes oxy-nav-menu desktop-menu
  • div.oxy-menu-toggle, which contains oxy-nav-menu-hamburger-wrap → oxy-nav-menu-hamburger → three oxy-nav-menu-hamburger-line divs
  • div.menu-main-container, which wraps ul#menu-main.oxy-nav-menu-list
  • the li.menu-item elements, each with an a link

Oxygen always outputs these classes and IDs for the menu element. A snippet that targets them will keep working every time you add a menu element.

Rebuild the desktop menu

We write the CSS inside @layer components and use @apply for the Tailwind classes. The code lives in Winden's Global CSS field (on the Winden Settings page, with Tailwind CSS Version 3.1.4 selected). In the recording we edit it in VS Code.

  1. Make the list horizontal: apply flex to #menu-main.
  2. Style the links, not the li wrappers. Target #menu-main .menu-item a, add a light background from the Tailwind slate palette, horizontal margin and padding, and a slightly darker hover state.
  3. Make it responsive. Change #menu-main to hidden md:flex so the list is hidden on mobile and shows as a row from the md breakpoint.
#menu-main{
    @apply hidden md:flex;
}

#menu-main .menu-item a{
    @apply bg-slate-100 hover:bg-slate-200 mx-4 px-4 py-2;
}

Rebuild the mobile toggle (hamburger)

With Oxygen's CSS off, the hamburger has no size and no lines. It should appear exactly where the desktop list disappears.

  1. Target .oxy-menu-toggle and give it md:hidden, so it uses the same breakpoint as the list. While you work, a temporary width: 20px; height: 20px; border: 2px solid red; shows where the element is. You can mix plain CSS with @apply in the same rule.
  2. Turn Oxygen's CSS back on for a moment and copy the original values into your file as plain CSS. That way you see exactly what Oxygen was doing. On screen these were: .oxy-nav-menu-hamburger-wrap 40×40px with 10px top and bottom margin, .oxy-nav-menu-hamburger 40×32px with display: flex, justify-content: space-between and flex-direction: column, and each .oxy-nav-menu-hamburger-line 6px high with background-color: #404040, border-radius: 2px and width: 100%.
  3. Turn Oxygen's CSS off again and convert those values to Tailwind classes, using the Tailwind docs (Width, Height, Space Between, Flex Direction, Customizing Colors) to find the matching class. 40px becomes w-10, 32px becomes h-8, 6px becomes h-1.5. The wrapper rule turned out to be unnecessary and was deleted. The rounded corners were dropped for now.
.oxy-menu-toggle{
    @apply md:hidden;
}

.oxy-nav-menu-hamburger{
    @apply w-10 h-8 flex justify-between flex-col;
}

.oxy-nav-menu-hamburger-line{
    @apply h-1.5 bg-slate-600;
}

The Tailwind version is much shorter than the plain CSS it replaces.

We also fix the header's left and right padding so the logo and toggle line up with the rest of the page. To do that, we copy the horizontal padding classes the other sections already use.

Rebuild the full-screen mobile menu

When you click the toggle, Oxygen's JavaScript still runs. It adds the class oxy-nav-menu-open to the nav and oxy-nav-menu-prevent-overflow to the html element. So the JavaScript side keeps working and only the styles are missing. To see what the open state needs, disable Oxygen's CSS again, open the menu and inspect it. Oxygen makes it position: fixed on all four sides with display: flex, a z-index and a white background.

  1. Recreate the overlay on .oxy-nav-menu-open with fixed, top-0 right-0 bottom-0 left-0, flex flex-col, bg-white and z-50.
  2. #menu-main is hidden on mobile, so show it again inside the open state as a centered column with vertical margin.
  3. Space the items with my-2 flex on the li and stretch each link to full width with w-full (the Tailwind equivalent of 100%).
  4. Push the hamburger to the right inside the open menu with ml-auto.
.oxy-nav-menu-open{
    @apply fixed bottom-0 left-0 right-0 top-0 flex flex-col bg-white z-50;
}

.oxy-nav-menu-open #menu-main{
    @apply flex flex-col my-16 justify-items-center text-center;
}

.oxy-nav-menu-open #menu-main li{
    @apply my-2 flex;
}

.oxy-nav-menu-open #menu-main li a{
    @apply w-full;
}

.oxy-nav-menu-open .oxy-nav-menu-hamburger {
    @apply ml-auto;
}

After that we add a little spacing around the toggle. From here, adjust colors, spacing and sizes to match your design.

Reuse the snippet on every Oxygen project

Oxygen always outputs these classes and IDs, so you only do this work once. Save the CSS as a code snippet and paste it into Winden's Global CSS in your next project. You get a working desktop menu, hamburger and mobile overlay without Oxygen's menu CSS. We published the snippet on code.dplugins.com.

Who is this for

  • Oxygen Builder users who have switched to Tailwind CSS with Winden and turned off Oxygen's CSS, and now have an unstyled menu.
  • Site builders who want the menu, like the rest of the site, styled only with Tailwind classes.
  • Anyone who needs to restyle an Oxygen element they can't reach from the structure panel. The same approach works for other elements: inspect, copy Oxygen's values, convert them to Tailwind.

FAQ

Why does my Oxygen menu look broken after enabling Tailwind CSS? Oxygen's CSS and Tailwind conflict. Once you disable Oxygen's CSS, the rest of the page looks right, but the menu element has no styles left. You have to add them back yourself, as shown in this video.

Can I style the Oxygen menu element with Tailwind classes? Yes. The classes can't be added to the menu's inner parts in the builder, so you target Oxygen's own classes and IDs (#menu-main, .menu-item a, .oxy-menu-toggle, .oxy-nav-menu-hamburger, .oxy-nav-menu-open) and use @apply in Winden's Global CSS.

Does the mobile menu still open and close without Oxygen's CSS? Yes. Oxygen's JavaScript still adds the oxy-nav-menu-open class when you click the toggle. You only restyle that open state with Tailwind.

Do I have to repeat this on every site? No. Oxygen outputs the same class names for every menu element, so you can paste the finished snippet into each new project and adjust the colors and spacing.

Get Winden → dplugins.com

Related posts