How to create Horizontal or Vertical Menu,

By the end of this video you can flip your main navigation between a full-width bar across the top and a sliding side panel, by moving one block from one region to another. No template editing is involved.

Two regions, one decision

W3CSS Theme offers the main navigation two homes among its 22 regions. Drop a menu block into Primary Menu and you get the horizontal bar. Drop it into Primary Menu Vertical and you get a W3.CSS sidebar instead. Both are ordinary block regions at /admin/structure/block, and nothing stops you filling both at once with two different menus.

How each one behaves

• Horizontal renders as #main-navigation-h, a coloured band spanning the viewport with the links constrained to your chosen site width. Below the theme's large breakpoint a hamburger button takes over, marked w3-hide-large in the markup.
• Vertical renders as #main-navigation-v carrying w3-sidebar w3-bar-block w3-animate-left, so it slides in from the left edge. A button opens it and a matching close button dismisses it; both are always present, on every screen size.

Opening the side panel from the right instead

1. Create a sub-theme and copy templates/layout/page.html.twig into it.
2. On the line containing main-navigation-v, change w3-animate-left to w3-animate-right.
3. On the line containing open-nav-inner, change w3-left to w3-right.
4. Add #main-navigation-v.w3-sidebar{right:0;} to the sub-theme stylesheet and rebuild caches.

A vertical main menu is not a side menu

This is the distinction the documentation is emphatic about. A vertical main menu is your site's primary navigation, living in its own region. A secondary menu parked in a sidebar is a different object with different templates: clone menu--responsive-h.html.twig or menu--responsive-v.html.twig from templates/navigation and rename it after your menu.

Both navigation regions exist unchanged across Drupal 9 to 12, the range in the theme's info file — see the W3CSS Theme project page. If you want the sidebar pattern with a different page layout on top of it, the Anhur sub-theme is built on this same parent.

Planning something larger than a single feature — a rebuild, or a move off an older Drupal? Drupal architecture services, or request a quote.