History: Site Header (Page Header) Strategies
Preview of version: 8
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
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-sm-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-sm-7" and a search module is "col-sm-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:
| (table coming soon) |
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.