Utility Nav

Updated

Usage

Open Appearance → Customize → Header & Menus → Utility Nav to add a slim bar above the main header. Turn on Enable, set the Height and Background, then choose a Layout.

Add Banner Text for short announcements ("Free shipping this week"). Turn Show Social, Shopping Cart, and User Login on or off, and set the link colors. Links come from the menu assigned to Utility Menu under Appearance → Menus.

When to use it

  • Promotions or hours that should show on every page.
  • Membership or business sites that want a login link without crowding the main menu.
  • Shops that want the cart in a slim top bar.

Tips

  • Enable on Mobile decides whether the bar also shows on phones or hides there.
  • Reverse Print switches to light text and icons. Pair it with a dark Background.
  • Social icons need profiles under Settings → Social Media. Turn on Social Colors only if you want each network's brand colors.
  • The cart and login here are separate from Show Cart and Show Login under Desktop. Use one place so shoppers don't see them twice.

Settings

Utility Nav

Enable setting in the block editor sidebar
Enable
Height setting in the block editor sidebar
Height
Enable on Mobile setting in the block editor sidebar
Enable on Mobile
Layout setting in the block editor sidebar
Layout
  • Rightdefault
  • Left
  • Split
  • Centered
Banner Text (HTML Allowed) setting in the block editor sidebar
Banner Text (HTML Allowed)
Show Social setting in the block editor sidebar
Show Social
Social Colors setting in the block editor sidebar
Social ColorsAvailable when Show Social is “Undefined”

Social icons will use social brand colors instead of yours.

Shopping Cart setting in the block editor sidebar
Shopping Cart
User Login setting in the block editor sidebar
User Login
Background setting in the block editor sidebar
Background
  • White
  • Gray
  • Darkdefault
  • Text
  • Primary
  • Secondary
  • Accent
  • Variant
  • Muted
Reverse Print setting in the block editor sidebar
Reverse Print
Link Color setting in the block editor sidebar
Link Color
  • Whitedefault
  • Gray
  • Dark
  • Text
  • Primary
  • Secondary
  • Accent
  • Variant
  • Muted
Link Color Opacity setting in the block editor sidebar
Link Color Opacity
Link Hover Color setting in the block editor sidebar
Link Hover Color
  • Whitedefault
  • Gray
  • Dark
  • Text
  • Primary
  • Secondary
  • Accent
  • Variant
  • Muted
Link Hover Opacity setting in the block editor sidebar
Link Hover Opacity