Top Bar Options

The Top Bar is an optional slim strip above the header. Use it for a short announcement, a phone number, opening hours or a small utility menu such as Blog and FAQ.

Public site with the top bar above the header: announcement text on the left and a small menu on the right

A top bar with an announcement and link on the left and a two-item menu on the right, above the Classic header.

What the top bar is for

The top bar sits above the header on every page. It has two independent sides — left and right — and each side shows either a line of text or a menu. Typical uses:

a promotion or shipping notice with a link (Free shipping over $60 — Shop now);
a phone number and opening hours on the left, and quick links on the right;
a small utility menu (Blog, FAQ, Careers, Support) that does not belong in the main navigation.

Where to find it

Open Appearance → Theme Options and select the Top Bar tab.

The Top Bar tab. The options after Show top bar appear once the bar is switched on.

Setting it up

Switch on Show top bar. The remaining options appear.
For each side, choose the content type: Text or Menu.
For Text, type your message into the text box. For Menu, pick one of your menus from the list.
Adjust the colours so the bar contrasts with the header and the text stays readable.
Switch on Show top bar on mobile only if the message is important on phones.
Choose Save Changes and check the public site.

Options

Option	What it does
Show top bar	Turns the bar on or off for the whole site. The bar only appears when at least one side has content; if both sides are empty nothing is shown.
Show top bar on mobile	The bar is hidden on small screens unless this is on.
Left side content / Right side content	Choose Text or Menu for each side.
Left side text / Right side text	The message shown when the side is set to Text. See the allowed formatting below.
Left side menu / Right side menu	The menu shown when the side is set to Menu. Only its top-level items are shown, and any icon you set on an item in the menu builder is displayed.
Top bar background	Background colour of the bar.
Top bar text color	Colour of plain text.
Top bar link color / Top bar link hover	Colour of links inside the text, and their hover colour.
Top bar menu color / Top bar menu hover	Colour of menu items and their hover and active colour. Menus use these, not the link colour.
Top bar border	The thin divider line under the bar.

Writing the text

The text boxes accept simple formatting. Only these HTML tags are kept: i, span, strong, b and a. Anything else is removed when the page is displayed.

<i class="ph ph-phone"></i> Call us: <a href="tel:+15555550100">+1 555 555 0100</a>

The ph ph-phone part draws an icon from the TruCMS icon set. Replace phone with another icon name, for example ph ph-clock for opening hours or ph ph-map-pin for an address. Use <strong> for a bold lead-in such as New:, and an <a href> link for a call to action.

Use real links

Links in the top bar should be full addresses (https://…) or site paths such as /contact-us. Use tel: and mailto: for phone numbers and email addresses.

Good practice

Keep it to one short line. The bar is deliberately slim.
Do not repeat the primary menu; use the right side for secondary links such as the blog or support.
Check contrast: light text on a dark bar, or the reverse. The defaults are a dark bar with light text.
If you announce a time-limited offer, remember to update or switch off the bar when it ends.

Header & Navigation Layouts · Echo Theme Options · Menus