An important part of responsive web design is good site identity and navigation in all display sizes. This page demonstrates and describes several methods to configure the site header area.

The site header combines concepts from the Bootstrap CSS framework and legacy Tiki page construction. This gives a lot of flexibility, but some understanding of the configuration process is needed.
(Details coming soon.)

Modules and module zones

In Tiki terminology, a module is a box that holds information or some functionality. A module can have a title and border and other "chrome" (using the Bootstrap panel class), or it can be just an HTML div with no visible markings. Modules are used in module zones, and well as in wiki text. The page header uses either the "top" module zone or the "topbar" module zone, or both, depending on the layout template (see below). In a horizontal module zone - top, topbar, pagetop, pagebottom, and bottom - Bootstrap grid classes can be assigned to modules to give them grid widths and responsive behavior. (See https://getbootstrap.com/examples/grid/ for the background on this.)

Using the Bootstrap grid

Modules are 100% of the width of the space their in unless the width is limited by a pixel or percentage amount. By assigning a "col-xs-6" parameter, for example, you set the module to be half of the width of the space it's in. In the topbar module zone, for instance, if a menu module is "col-xs-7" and a search module is "col-xs-5", then they will share the topbar's space, side by side, with the menu 7/12 of the width, and the search form 5/12.

Since the whole Tiki page uses the Bootstrap grid, assigning grid div classes to modules in horizontal module zones doesn't just make the modules there display nicely side by side, it also can enable them to line up with the rest of the grid in the page, such as columns in wiki pages, etc., if that's desired.

Layout template makes a difference

Switching the layout template on the Look and Feel admin page can make a difference in what modules are used in the site header. Here are the options:

* As configured on the Look & Feel admin page
** The Tiki project sites use custom JavaScript for the page header scrolling, documented here.

The search form

The general information about configuring the search feature is here: https://doc.tiki.org/Search. When used in the site header, the search form generally isn't displayed as a normal module, with box/panel border and title, etc. (appearance depending on the theme). Instead, it has the parameter nobox=y set so that only the search input and other form components are show.

Update: The search form now has a Bootstrap "form-inline" class, so, if there is enough available width, all of the form's components will display inline (in one row). They will wrap if there isn't enough width for them on one line.

If the width allotted for the search module is too small, it may take up two or more rows as the buttons are positioned below the input. To prevent this, be sure there's enough space (width) for the module.

If the "Compact mode" parameter is set to "y", and advanced features aren't activated, then the form uses only one line, which is the most compact vertically.

The buttons appear when the pointer hovers over the form.