BuddyX
Get BuddyX Pro

Recipe: Add and style your navigation menu

Free & Pro

What you'll build: a working primary navigation menu assigned to your header, then styled with BuddyX Pro's header controls - menu position, the More Menu overflow, sub-menu typography, and the mobile hamburger breakpoint.

Time: ~20 minutes Prerequisites: theme installed and activated (see Installation if not yet)

Every site needs a menu before the header looks finished. WordPress core builds the menu; BuddyX Pro decides where it sits, how it behaves when it gets long, and when it collapses to a hamburger on smaller screens. This recipe walks the whole path in order.

Step 1 - Create the menu (4 minutes)

  1. Go to Appearance > Menus (or Appearance > Customize > Menus if you prefer the live-preview panel)
  2. Click create a new menu
  3. Give it a name you'll recognize later, e.g. "Primary Navigation"
  4. Click Create Menu

Result: an empty menu now exists, ready for links. Nothing shows on the front end yet - it isn't assigned to a location.

Step 2 - Add pages and links (4 minutes)

  1. In the left column of the Menus screen, open the Pages, Posts, Custom Links, and Categories panels
  2. Tick the items you want (Home, About, Activity, Members, Shop, Contact, etc.) and click Add to Menu
  3. For anything not on your site - an external profile, a mailto link - use Custom Links to add a URL and label
  4. Drag menu items up and down to order them
  5. Drag an item slightly to the right, under another item, to make it a sub-item (this is the dropdown / sub-menu)
  6. Click Save Menu

Keep the top level short. Group secondary pages as sub-items so the header stays tidy - the More Menu (Step 4) and hamburger breakpoint (Step 6) both work better with a lean top row.

Result: your menu now has a structure, with dropdowns wherever you nested items.

Step 3 - Assign the menu to a location (2 minutes)

BuddyX Pro registers separate menu locations so you can show different navigation to logged-in members and logged-out visitors:

  • Primary - Logged in users
  • Primary - Logged out users
  • Mobile Menu - Logged in users / Mobile Menu - Logged out users
  • Side Menu and User Menu locations for community layouts
  1. Scroll to Menu Settings at the bottom of the Menus screen
  2. Under Display location, tick Primary - Logged in users
  3. If you want the same menu for visitors who aren't signed in, tick Primary - Logged out users too (or build a second, trimmed menu and assign it there)
  4. Click Save Menu

Result: reload your front end - the menu now appears in the header. From here on, everything is BuddyX Pro styling.

Step 4 - Set the header menu position and More Menu (3 minutes)

  1. Go to Appearance > Customize > Site Header
  2. Find Header Menu Position and choose Right, Left, or Center
  3. Find More Menu ? and leave it Yes (the default) so any items that don't fit collapse into a tidy "More" dropdown instead of wrapping to a second line
  4. Click Publish

Header Menu Position only appears when your Menu Layout is set to Layout 1 (Logo Left, Menu Right). Layouts 2, 3, and 4 fix the menu position as part of their design. See Header Layouts to pick or change the layout.

Result: the primary menu sits where you chose, and long menus overflow into More rather than breaking the header. Full reference: Header Elements & Icons.

Step 5 - Style the menu and sub-menu typography (3 minutes)

  1. Go to Appearance > Customize > Typography > Menu
  2. Under Settings, set the font family, size, weight, and letter-spacing for the top-level menu items
  3. Under Sub Menu Settings, set the same properties for dropdown (sub-menu) links - these can differ from the top level, e.g. a slightly smaller size
  4. Click Publish

Want a hover animation on menu items too? Add one under Customize > Site Header > Header Menu Effects (Effect 1, 2, or 3, or No Effect). See Header Layouts for the effect options.

Result: menu and dropdown text now match your brand typography, independently of the body font.

Step 6 - Set the mobile hamburger breakpoint (2 minutes)

On narrow screens the desktop menu collapses to a hamburger icon. You decide at what width that switch happens.

  1. Go to Appearance > Customize > Site Header
  2. Drag the Hamburger Menu Breakpoint slider (range 768px to 1600px, default 768px) to the screen width where you want the switch
  3. Preview using the mobile and tablet icons at the bottom of the Customizer
  4. Click Publish

Raise the breakpoint if your menu has many items and starts to wrap on tablets - the hamburger then kicks in earlier (on wider screens) and keeps the header clean. Full mobile reference: Mobile Header.

Result: below your chosen width the header shows the hamburger; above it, the full menu. Resize the browser to confirm the switch lands where you expect.

Verify the whole flow

Visit your site logged out, then logged in, at desktop and mobile widths:

Check Expected
Menu appears in header Yes, in the position set in Step 4
Logged-in vs logged-out menu Matches the locations assigned in Step 3
Long menu handling Extra items collapse into More, no wrapping
Dropdowns Sub-items appear on hover / tap, styled per Step 5
Mobile Below your breakpoint, the hamburger opens the menu

If a change doesn't show, confirm you clicked Publish, hard-reload (Cmd+Shift+R / Ctrl+F5), and purge any caching plugin.

Related

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.