Brioche - Header & Navigation Menus

For detailed instructions on how to create and use menus in WordPress, click here.

Navigation menu locations

The Brioche theme has 4 navigation menu locations:

  • Primary = Menu to the right of your site title/logo
  • Secondary = Not shown in the demo, but could be incorporated into your header via the Header Builder
  • Mobile = Menu that displays on mobile devices only
  • Footer = Menu at the bottom left corner of your website

Primary Navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Main Menu") and click Create Menu.
  3. Add the pages/categories you want to have in your primary navigation menu.
  4. At the bottom of the page, under Menu Settings, select Primary. Save Menu.

Secondary Navigation

(Not shown in the demo)

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Top Menu") and click Create Menu.
  3. Add the pages/categories you want to have in your secondary navigation menu.
  4. At the bottom of the page, under Menu Settings, select Secondary. Save Menu.

Mobile Navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Mobile Menu") and click Create Menu.
  3. Add the pages/categories you want to have in your mobile navigation menu.
  4. At the bottom of the page, under Menu Settings, select Mobile. Save Menu.
The content of the mobile menu "off canvas" area can also be fully customized! Click here.

Footer Navigation

(Not shown in the demo)

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Footer Navigation") and click Create Menu.
  3. Add the pages/categories you want to have in your footer navigation menu.
  4. At the bottom of the page, under Menu Settings, select Footer. Save Menu.

Desktop Offscreen Menu

Click here for setup instructions!

Header Top Row & Scallop

The Brioche theme includes a customizable Top Row above your main navigation, featuring an announcement, social media icons, and a search icon. A decorative scalloped edge sits beneath the Top Row for a unique finishing touch!

Both the Top Row and scallop detail are completely optional. Below, we'll walk you through how to customize or disable these features to suit your preferences.

Where to Find the Header Top Row

To customize the Top Row, go to Appearance > Customize > Header.

In the Header Builder, you'll see three elements in the Top Row:

  • HTML: Displays the announcement text ("New cookbook! Grab your copy of Freshly Gathered →").
  • Social: Displays your social media icons
  • Search: Displays a search icon

You can click on any of these elements in the Header Builder to customize their settings.

Announcement Text

  1. In the Header Builder, click on the HTML element in the Top Row.
  2. Replace the default announcement with your own text using the editor.
  3. To add a link, highlight the text you'd like to link, click the link icon in the editor toolbar, and enter your URL.
  4. Click Publish to save your changes.

You can also remove the HTML element if you don't want to display an announcement, or replace it with a Secondary Navigation menu if you'd like to display additional menu links in the Top Row.

Social Icons

  1. In the Header Builder, click on the Social element in the Top Row.
  2. Under the General tab, you can add, remove, or rearrange your social media icons.
  3. Under the Design tab, you can customize the icon colors, size, and spacing.
  4. To link the icons to your social profiles, visit our Setting Up Social Icons tutorial →
  5. Click Publish to save your changes.

Search Icon

The search icon is already configured in the Brioche demo, so you shouldn't need to make any changes!

If you'd like to customize it, click on the Search element in the Header Builder's Top Row. Here, you can adjust the search settings and customize the icon's appearance under the Design tab.

Top Row Background Color

To change the Top Row background color, go to Appearance > Customize > Header.

  1. Hover over the Top Row in the Header Builder and click on the settings icon.
  2. Select the Design tab.
  3. Choose your preferred background color.
  4. Click Publish to save your changes.

Customize the Header Scallop

To access the scallop settings, go to Appearance > Customize > Brioche Theme Settings > Header Scallop.

In this panel, you'll find the following options:

  • Enable Header Scallop: Turn the decorative scalloped edge on or off. If disabled, your top row will display without the scallop.
  • Scallop Color: Choose the color of the scalloped edge. You can select a color from your site's Global Palette or choose a custom color.
  • Display Scallop on Mobile: Choose whether the scalloped edge should also appear on mobile devices. You can disable it on mobile while keeping it enabled on desktop.
  • Mobile Scallop Color: Set a separate scallop color for mobile devices.
Tip: For a seamless look, we recommend matching the scallop color to your top row background color. This makes the scalloped edge appear as a natural extension of the header.