Loading...
 
Themes

Themes


Customising BootstrapTheme: Search Module inside Header

Australia
  • 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.

Japan

Hi,

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 


Australia

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?

 

 

 

 

 


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting