Customising BootstrapTheme: Search Module inside Header

  • Tiki 14
  • Default Bootstrap theme with some colour customisations
  • Standard Bootstrap layout

I've put a search module inside our site header, but have had some difficulty improving its looks. See the screenshot attached. I'd prefer it to look like the search module in the navbar here on the Tiki Forum.

In Admin Modules I can't get Search assigned to the topbar, only to the top. Nor can I figure out how to get the search icon inline with the form field.

I'd settle for keeping Search in the top module if I can just get it looking less ... clunky.

I've peered into Inspect Element in Firefox and put the Tiki CSS Assistant through its paces, but am still lost. Advice on how to proceed would be very much appreciated.



I believe your search form's button is on a second line because there isn't enough space for it alongside the input field. Bootstrap CSS grid div classes can be used to assign widths to items in the top and topbar module zones. At this site, in the topbar module zone,  the menu has a  "Containing Class" (aka "topclass" in the parameters shown in the table of active modules) of "col-md-9", and the search module has a Containing Class of "col-md-3". This means in medium-sized displays and larger, the menu will be 9/12 the content width and the search form 3/12 the width. This is enough width to allow the search input field and button to display side by side.

Can you try adding div classes like those to your modules to see if you get the effect you want? (Documentation still needs to be written about this, as far as I know.)

Also, I wonder why you can't assign the search form to the topbar zone; do you mean it's completely impossible, or that you get a bad display when you try?

-- Gary 


Thank you so much Gary, adding those classes worked a treat.

I had attempted giving Search .col-md-3, but - slap ma forehead - hadn't thought to give the menu its corresponding .col-md-9.

The trouble I had with getting Search in the topbar was I couldn't slip it in there via drag and drop, while I could drag it into other areas fine. Due the class issue, perhaps.

I'd like to take it a step further if possible and get the whole topbar, both menu and search, to hide under the toggle in small displays. At present only the menu is hidden. See screenshot from Firefox Responsive View at 768px wide. Do I need to (learn to) edit the template or can it be done with a CSS class?