← All posts

Multi-Column Footer Menu in Oxygen Builder, Managed from Menus

oxygen

A multi-column footer built from separate text and link elements means every new link or column sends you back into Oxygen Builder, and your client can't make the change without you. In this tutorial we build a multi-column footer menu in Oxygen Builder from one nested WordPress menu. After that, columns, links and their order are all managed from Appearance → Menus. It takes one Menu element and a short SCSS block.

Setting up the menu structure

The footer layout comes from the menu, so we plan the columns there first. Each top-level item becomes a column heading and its child items become the links under it.

  1. Go to Appearance → Menus and create a new menu. We named it Footer Menu.
  2. Open Screen Options and enable CSS Classes. The headings need their own class.
  3. Under Custom Links, add one item per column heading. We used Plugins, Pages and Connect with # as the URL.
  4. Expand each heading item and set CSS Classes (optional) to parent-menu-title.
  5. Add pages from the Pages panel and drag them under a heading so they show as sub item.
  6. For the social column, add custom links (Facebook, Instagram) and nest them under Connect.
  7. Click Save Menu.

Oxygen Builder integration

Next, the footer needs a layout wrapper and a single element that outputs the menu. You won't hardcode any links in the template.

  1. Create a new template under Oxygen → Templates. We used a Header and Footer template set to catch all. Publish it, then edit it with Oxygen.
  2. Add a Div and change its Tag to footer.
  3. Inside it, add another Div with the class container. In Advanced → Size & Spacing, set Width to 90 %, left and right Margin to auto, and Max-width to 1200. We renamed this element "footer container" in the structure panel so it's easy to find.
  4. Add an Image for the logo.
  5. Add a Menu element. Set Menu Layout to Horizontal and choose Footer Menu in the Menu dropdown.
  6. Under Dropdowns, turn on hiding the arrows. Footer columns don't need dropdown indicators.

Styling the footer menu

Oxygen's builder settings handle the basic spacing and colors. Everything column-specific goes into custom CSS later.

  • On the footer div, set the Padding in Size & Spacing (we used 20 on each side).
  • On the Menu element, set the text colors under Text. Under Spacing, remove the default item padding.
  • In Advanced → Size & Spacing, set the menu Width to 100 % so it fills the remaining space next to the logo.

At this point the menu shows only the three headings in a row, and the links sit in hidden dropdowns.

Custom CSS implementation

By default, Oxygen renders submenus as hover dropdowns. For a footer, every column has to be visible side by side. You can write this CSS in any stylesheet or CSS plugin. We use a Scripts Organizer code block so the SCSS lives in WordPress.

  1. In Scripts Organizer → Code Blocks, add a new block titled Footer and set the language to SCSS.
  2. Scope everything to the menu ID Oxygen generates from the menu name (#menu-footer-menu), inside .oxygen-body footer. The more specific selector means you rarely need !important to override Oxygen's defaults.
  3. While you work, add a temporary * { border: 1px solid red; } inside the selector so you can see each box. Comment it out when you're done.

Use browser DevTools to find the right elements. The menu list is ul#menu-footer-menu.oxy-nav-menu-list, and the nested lists use the sub-menu class.

Sub-menu design and refining

Oxygen hides submenus with visibility, opacity and absolute positioning. To make them static columns, override those properties, then style the headings differently from the links.

Here is the final SCSS from the video:

.oxygen-body footer #menu-footer-menu{

    display: flex;
    gap: 20px;

    li{
        width: 100%;
    }

    .parent-menu-title > a{
        opacity: .5;
        font-size: 14px;
        text-transform: uppercase;
    }

    .sub-menu {
        visibility: visible;
        opacity: 1;
        position: relative;
        top: 0;
        background: transparent;


        a{
            padding: 10px 0 !important;
        }

    }

    *{
        // border: 1px solid red;
    }
}

What each part does:

  • display: flex + gap puts the top-level items next to each other as columns. li { width: 100% } makes them share the width evenly.
  • .parent-menu-title > a uses the class you added in Menus to style the headings as small, faded uppercase labels. The child links keep their normal styling.
  • .sub-menu turns the dropdowns into always-visible, normally positioned lists. background: transparent removes the white dropdown background.
  • a { padding: 10px 0 !important; } adds vertical spacing between the links.

The spacing values here are hardcoded to keep the demo short. On a real project, use variables so the spacing stays consistent across the site.

Maintenance and wrap-up

With the footer built, you or your client can make changes in the menu editor without opening Oxygen or touching CSS.

  • Rename links: in the video, we renamed two sample pages to Swiss Knife and Oxywind and saved the menu. The footer updated right away.
  • Add a column: add a new custom link, give it the parent-menu-title class, name it (we used Featured Posts), and nest posts under it. It appears as a new column.
  • Reorder columns: drag a top-level item to another position. We moved Connect to the end, and the columns reordered with no code changes.

The next tutorial in this series covers making the footer responsive: on mobile, the submenus collapse and expand on click.

Who is this for

  • Oxygen Builder users who want clients to maintain footer links without opening the builder.
  • Developers who want the footer structure in one WordPress menu instead of several hardcoded link lists.
  • Anyone who needs to turn Oxygen's dropdown menu into static, side-by-side columns with a small amount of scoped SCSS.

FAQ

How do I show Oxygen menu submenus as columns instead of dropdowns? Override the .sub-menu styles: set visibility: visible, opacity: 1, position: relative, top: 0 and a transparent background. Then set display: flex on the menu list so the top-level items sit side by side.

How do I style the column headings differently from the links? Enable CSS Classes in the Screen Options of the Menus screen, and give each top-level item a class such as parent-menu-title. Then target .parent-menu-title > a in your CSS.

Can a client add a new footer column without editing Oxygen? Yes. They add a top-level item with the same class, nest links under it in Appearance → Menus and save. The CSS already applies to any new column.

Do I need Scripts Organizer for this? No. The video uses it for convenience, but any stylesheet or CSS plugin works.

Why scope the CSS to .oxygen-body footer #menu-footer-menu? The more specific selector overrides Oxygen's default menu styles without !important on every rule. It also limits the styles to this footer menu, so your header menu stays unchanged.

Related posts