History: Site Header (Page Header) Strategies

• «
• »

            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
{DIV(class="row")}{DIV(class="col-sm-4")}{img fileId="179"}{DIV}{DIV(class="col-sm-8")}
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.){DIV}{DIV}

!! 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:
|| __Layout template__ | __Site header module zones__
Basic Bootstrap | [[ Top module zone ]%%%[[ Topbar module zone ]
Classic Tiki | [[ Top module zone ]%%%[[ Topbar module zone ]
Wider Side Columns | [[ Top module zone ]%%%[[ Topbar module zone ]
Fixed Top Navbar 1 | [[ Top module zone ] (fixed to browser window top)%%%[[ Topbar module zone ] (scrolls with page content)
Fixed Top Navbar 2 | [[ Site icon and title ]* [[ Topbar module zone ] [[ Log-in form ] (fixed to browser window top)  ||
 * As configured on the Look & Feel admin page
 ** The Tiki project sites use custom JavaScript for the page header scrolling, documented ((Tiki project sites page header scrolling|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.

{DIV(class="row")}{DIV(class="col-sm-4")}
{img fileId="175"}
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. 
{DIV}{DIV(class="col-sm-4")}
{img fileId="176"}
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. 
{DIV}{DIV(class="col-sm-4")}
{img fileId="177"}
The buttons appear when the pointer hovers over the form.
{DIV}{DIV}