By the end of this video you can build the menu that becomes your site's main navigation — and you will know that it does not have to be Drupal's built-in Main navigation menu at all.
Any menu can be the main menu
W3CSS Theme hard-codes nothing. It renders whatever menu block you place in its navigation region, so a menu you create yourself is as valid as the one Drupal ships. That matters on a site where the default menu is already carrying administrative links you do not want in the header.
Building it
- Go to
/admin/structure/menuand click Add menu. Give it a title and save. - Click Add link for each item. To nest an item, choose its Parent link from the list.
- Go to
/admin/structure/blockand place that menu's block into the navigation region you want. - In the block configuration, open Menu levels and set Initial visibility level and Number of levels to display. This is how you stop a deep menu dumping everything into the bar.
- Drag the block to order it within the region, then save the block layout.
Three levels, and how they open
The theme's menu markup supports three levels counting the first one. On a wide screen the first level is always visible and the deeper levels open on hover; below the theme's large breakpoint — declared as min-width: 993px in the theme's own breakpoints file — everything collapses behind the toggle and opens on click instead. Plan your labels for that: a first level with eight long items is fine on a laptop and unusable on a phone.
Giving one menu its own template
The theme adds a template suggestion built from the region a menu is rendered in, so you can create menu--primary-menu.html.twig or menu--primary-menu-vertical.html.twig in your sub-theme and restyle the main navigation without affecting any other menu on the site. Clear caches after adding the file.
You can run two menus at once, one in each navigation region. See the W3CSS Theme project page for the full region list, or Solo if you are building on Drupal 10.1 or newer.
Want a Drupal theme built or customised around your brand rather than configured by hand? See Drupal theming services, or request a quote.
