Pro The Extras tab of a Navbar profile is in Pro only. Free The separate Webal Colour mode switch module is in the Free package and in Pro. You can place it in a header position yourself.
The Webal navbar can show more than links. On the Extras tab of a Navbar profile you can add a search box, social links, a button, your own text and the colour mode switch, and each one can be placed once. For each of them, you choose a place on wide screens and a place on small screens.
Where the extras can go
A place is a part of the bar. On wide screens the choices are top bar start, top bar end, main bar start (next to the brand), main bar centre, main bar end, or not shown. On small screens the choices are mobile bar start, mobile bar end (next to the menu button), top of the mobile menu panel, bottom of the mobile menu panel, or not shown.
| Extra | On wide screens | On small screens |
|---|---|---|
| Search | Main bar, end | Top of the mobile menu panel |
| Social links | Top bar, end | Bottom of the mobile menu panel |
| Button | Main bar, end | Bottom of the mobile menu panel |
| Your own text | Top bar, start | Bottom of the mobile menu panel |
| Colour mode switch | Main bar, end | Bottom of the mobile menu panel |
The top bar is a thin row above the main bar, and you turn it on with Show a top bar on the Layout tab. If the top bar is off, an extra that is placed in it is drawn at the start or end of the main bar instead of vanishing.
The colour mode switch
The colour mode switch shows three buttons, called Light, Dark and Auto, which visitors use to choose how your site looks. Auto follows the setting on the visitor's phone or computer.
Turn it on
- Open Components, Webal Blocks, then press Options, and choose the Appearance tab.
- Set Site colour mode to Auto with a visitor switch and press Save & Close. In any other mode the switch is not shown, because there is nothing for the visitor to change.
- Open your Navbar profile from Components, Webal Blocks, Menu profiles, and choose the Extras tab.
- Under Colour mode switch, set Show the colour mode switch to Yes.
- Choose Show: Icons only, Words only or Icons and words. An icons-only switch still has names for screen readers (programs that read the page aloud).
- Choose its place on wide screens and on small screens.
- Press Save and look at your site, but if Joomla's cache (a store of finished pages and modules) is on, clear it first.
If the colour mode is not Auto with a visitor switch, the navbar leaves the switch out. Someone who is allowed to administer the site sees a warning that says which Option to change, but visitors never see it.
Every switch on a page stays in step with the others. The page Dark styles and colour modes explains the colour modes, and the separate module has its own page: Webal Colour mode switch.
The visitor's choice is saved in the browser, on that device only, and it is not sent to your server. Without scripts (small programs that run in the browser), the buttons are hidden and the site follows the visitor's device setting.
Search
| Option | What it does | Starting choice |
|---|---|---|
| Show a search box | Adds a search box that uses Joomla's Smart Search. It needs the Smart Search component to be switched on. | No |
| Search style | A search box in the bar, or a search button that opens the box. | A search box in the bar |
| Hint inside the box | The words shown inside the empty box. | Empty |
| Name for screen readers | The name of the search box. | Empty, which says Search |
| Search results page | The menu item that shows the results. | Joomla's own search page |
If Smart Search is switched off, the box is left out, and someone who is allowed to administer the site sees a warning that says so.
Social links
| Option | What it does | Starting choice |
|---|---|---|
| Show social links | Adds a row of links to your social profiles. | No |
| Social links | One row for each link: the platform, the address, a name and whether it opens in a new tab. You can add up to 12. | None |
| Show | Icons only, icons and words, or words only. | Icons only |
| Look | Each platform in its own colour, outlined, or one plain colour. | One plain colour |
| Size | Standard, large or extra large. | Standard |
A button
| Option | What it does | Starting choice |
|---|---|---|
| Show a button | Adds a call-to-action button, such as Get a quote. | No |
| Button words | The words on the button. Keep them short and clear. | Empty |
| Button link | Link to nothing, a menu item, an article or a web address. You can also open it in a new tab and give it an accessible name. | Nothing |
| Button look | Solid in the main colour, outlined, or solid in the secondary colour. | Solid, main colour |
| Button icon | An optional icon. | None |
If a link opens in a new tab, the button tells screen readers about it.
Your own text
Set Show your own text to Yes and type your text in Your text, which suits opening hours or a phone number. Only basic HTML is kept, and Joomla content plugins never run on it.
Other modules in the bar
You can also put any Joomla module into the bar. Give a region of the Layout tab a module position name, and then place a module in that position. This works for a Webal module such as the Social links module, and for a shop basket, and the page Navbar profiles explains module positions and the caching warning.
Tip. Fewer extras make a calmer bar, and on a phone, the top and bottom of the mobile panel are good homes for search, social links and the switch.
Accessibility. The search box has a real label, and the colour switch is a group of real buttons that says which one is chosen. All of them work with the keyboard, and the targets are at least 44 pixels. A button that opens in a new tab says so.
Other languages. The words you type here, such as the button words and your own text, are stored in the profile, so on a site with more than one language you should make one profile for each language. Words you leave empty come from Joomla's language files, and the page Multilingual sites shows how to change them.