Pro Navbar profiles are in Pro only. The Free package has the Webal navbar with its starting choices.
A Navbar profile is a saved set of settings for one Webal navbar. Joomla's Menu module has no room for the many choices that a navbar needs, so Webal Blocks keeps them in a profile. You link the profile to your Menu module, and the module then uses those choices.
A Menu module uses one profile at most. A module with no profile uses the starting choices, so a menu never breaks because a profile is missing, unpublished or in the trash.
Make a profile
You need a Menu module that already uses the layout Webal navbar. The page The navbar at a glance shows how to make one.
- Open Components, Webal Blocks, Menu profiles.
- Open the New list and choose Navbar profile.
- Type a Title that says where the profile is used, for example Main navbar.
- On the General tab, tick your Menu module in Menu modules. A module that another profile already has is shown but cannot be ticked, and the list names that profile.
- At the top of the screen, use Quick setup for the common choices, which the page Quick setup presets explains.
- Go through the tabs below. Every box can stay empty, because an empty box uses its starting choice.
- Press Save, and then look at your site.
Every field has a short help text, which you can read by hovering over the question mark beside its name or by giving it keyboard focus. The Help button in the toolbar opens these instructions.
The tabs
| Tab | What it holds |
|---|---|
| Brand | Where the logo or name comes from, a tagline, which end of the bar it sits at, and the name that screen readers say for the menu. |
| Layout | How the bar is arranged, its width and height, the top bar, and the module positions of each part of the bar. |
| Dropdowns and mega menus | How sub-menus open and look, and whether mega menus are used. |
| Mobile | The menu button and the panel that holds the menu on small screens. |
| Sticky and colours | Keeping the bar in view, a see-through bar over a picture, the shadow, and your own colours. |
| Extras | A search box, social links, a button, your own text and the colour mode switch. |
| Animation | How dropdowns, mega menu panels and the mobile panel open and close. |
| Advanced | Headings in panels, the names of a child theme's own header, and an ID and classes for the whole navbar. |
Brand tab
| Option | What it does | Starting choice |
|---|---|---|
| Brand source | Where the brand comes from: The logo or site title set in the template, My own logo, Text only or No brand in the bar. | The logo or site title set in the template |
| Brand text | The words for the brand when you choose text only. Empty uses the site name. | Empty |
| Tagline | A short line beside the brand. It is hidden on small screens. | Empty |
| Brand position | Which end of the bar the brand sits at. | At the start of the bar |
| Menu name for screen readers | The name that screen readers say for this menu. Give each menu on a page a different name. | Empty, which says Main menu |
| Use a different logo on small screens | Lets you choose a second logo for the mobile bar. | No |
With My own logo you can choose a picture, a dark-mode picture, a name, a link and the largest height. The brand link always has a name, so that people who cannot see the logo still know what it is.
Layout tab
| Option | What it does | Starting choice |
|---|---|---|
| Layout | How the brand and menu share the bar. There are eight choices, from the menu at the start to two stacked rows. See below. | Menu at the start (left in English), next to the brand |
| Width | How wide the content of the bar can grow, from Container to Full width. | Container, extra extra large |
| Bar height | Compact (3.5 rem), Standard (4.5 rem) or Tall (5.5 rem). | Standard |
| Show a top bar | Adds a thin row above the main bar for contact details or social links. | No |
| Show the top bar from | The smallest screen size at which the top bar appears. | Medium screens up |
| Extra module positions | Up to eight more places for Joomla modules, such as a shop basket. | None |
The eight layouts are menu at the start, brand and menu centred, menu at the end, menu fills the space, brand centred between two halves of the menu, and three stacked layouts with two rows. The stacked layouts use two rows on purpose, and every other layout is one row.
The bar also has nine regions, which are parts of the bar that can hold modules: top bar start and end, main bar start, centre and end, mobile bar start and end, and mobile panel top and bottom. Each region has a module position, an ID and CSS classes.
Module positions in the bar
Put any Joomla module in a region's position and it appears in that part of the bar. The names are suggested on a new profile, for example wbl-navbar-end, and you clear a box if you want no position there. Each name can be used once in a profile, and the form says which two boxes clash.
If the top bar is off, anything placed in the top bar is drawn at the start or end of the main bar instead of vanishing, and you can choose another place to move it.
Important. A module in the bar is shown to everyone, so a module that changes for each visitor, such as a basket count or a login box, must not be stored in Joomla's module cache (a store of finished pages and modules). Turn caching off in the linked Menu module. The Layout tab shows a yellow notice when this applies, and the notice names the Menu module and the modules that are left out.
Dropdowns and mega menus tab
| Option | What it does | Starting choice |
|---|---|---|
| Open sub-menus | When the pointer rests on them or when clicked, or only when clicked or pressed. Click only is easier on touch screens. | When the pointer rests on them, or when clicked |
| Wait before opening | How long the pointer must rest before a sub-menu opens. | 0.1 seconds |
| Wait before closing | How long a sub-menu stays open after the pointer leaves. | 0.3 seconds |
| Show an arrow beside items with a sub-menu | A small arrow that is also the button that opens the sub-menu. | Yes |
| Dropdown width | As wide as its content, Wide (16 rem) or Wider (20 rem). | As wide as its content |
| Dropdown alignment | Starts at the item's start edge, or ends at its end edge. | Starts at the item's start edge |
| Third-level items | Open to the side, or shown indented below. | Open to the side |
| Use mega menus | A menu item that has a published mega menu opens that panel instead of a plain dropdown. | Yes |
| Mark the current page with | An underline, a background, or nothing. Screen readers are told the current page in every case. | An underline |
Mobile tab
The page The mobile menu explains this tab.
Sticky and colours tab
| Option | What it does | Starting choice |
|---|---|---|
| Keep the bar in view | No, it scrolls away. Yes, always visible. Or it appears when scrolling up. | Yes, always visible |
| On small screens | The same choice for small screens, or its own. | The same as wide screens |
| Gap above the sticky bar | Space left above the bar, for example under an announcement strip. | None |
| See-through bar over a picture | Off, or on with light or dark text. | Off |
| See-through on these pages | The pages where the bar is see-through. On every other page it is solid. | No page |
| Becomes solid after | How far the page scrolls before the see-through bar turns solid. | Scrolling past the bar |
| Shadow under the bar | None, always a soft shadow, or only once the page has scrolled. | Only once the page has scrolled |
| Colour scheme of the bar | Inherit (follow the page), Light or Dark. | Inherit |
A see-through bar sits on top of the picture at the top of the chosen pages, and you must choose text that can be read over your picture: light text on a dark picture, or dark text on a light one. For visitors whose browser has scripts (small programs that run in the browser) turned off, the bar stays solid, so the menu stays readable.
Your own colours
Under Your colours apply in you can set your own colours for the bar background, link text, link text under the pointer, current page, borders and lines, dropdown background, dropdown text and menu button. A colour is a value such as #12344d.
A colour you choose has to be easy to read, so when you save, the form checks every pair. It refuses a colour that does not reach the contrast that WCAG asks for, which is 4.5 to 1 for text and 3 to 1 for the menu button, and the message says which pair is wrong. With Both colour modes, set the bar background too, because one text colour cannot be readable on both a light and a dark page. Borders are not checked.
A dropdown or the mobile panel with a background of its own shows the dropdown text colour for hover and the current page, so a dark bar can sit beside a white dropdown and stay readable.
Extras tab
The page Colour switch and buttons in the navbar explains this tab.
Animation tab
| Option | What it does | Starting choice |
|---|---|---|
| Dropdowns | How dropdowns open: none, fade, slide (short or medium), grow in or reveal. | Same as the site setting |
| Mega menu panels | The same list, for mega menu panels. | Same as the site setting |
| Mobile panel | The same list without Reveal, for the mobile panel. | Same as the site setting |
| Length | 0.15 to 0.4 seconds. | Same as the site setting |
| Keep the bar still when the page changes | In browsers that support it, the bar stays in place while the next page loads. | Yes |
"Same as the site setting" uses the Menu animation chosen in the Webal Blocks Options, and visitors who ask their device for less motion see no animation.
Advanced tab
| Option | What it does | Starting choice |
|---|---|---|
| Headings in panels and mega menus | By default, column titles are styled text, not headings, because the navbar comes before the page heading. Choose a level only if the menu should appear in the page outline. Never skip a level. | None (styled text, not headings) |
| Header selector | For a child theme that changed the header: the tag and classes of its header, such as header.site-header. | Empty, which finds the Cassiopeia header |
| Template brand selector | The same, for the block that holds the template's own brand. | Empty |
The header and brand names accept a tag and up to three class or ID parts, and nothing else is accepted.
What the form checks
- An ID uses letters, digits, hyphens and underscores, starts with a letter, and has up to 64 characters.
- CSS classes can have up to six names, separated by spaces, and each name starts with a letter or underscore.
- A module position uses letters, digits, hyphens and underscores, and is used once in a profile.
- A profile holds at most 8 extra module positions and 12 social links.
- If a choice clashes with another, the form refuses it in plain words and does not save.
Nothing you type is ever run as code.
A site in more than one language
A Menu module chooses its profile, and Joomla already keeps one Menu module for each language, so you should make one profile for each language and choose the matching one in each language's Menu module. Name each profile for its language, for example Main bar, German, because the profile list does not filter by language.
Every word you leave empty comes from Joomla's language files, in the language of the page, and a language pack or System, Language Overrides changes it. The page Multilingual sites has the full story.
Accessibility. Give every menu on a page its own name for screen readers (programs that read the page aloud), or its own Menu module title, because two menus with the same name are hard to tell apart. The bar uses no headings by default. People who ask their device for less motion see no animation, and a bar that is set to appear when scrolling up stays in view for them.