Loading...
 
Features / Usability

Features / Usability


search bar in menu bar

posts: 37

Hi again.
I can figure out how to get the search bar below the menu bar, but can't figure out how to get it on the right side of the menu bar, just like it is on this page.

Thanks!
Jennifer

posts: 4656 Japan

Hi Jennifer,

Essentially, the menu and search bar are assigned widths, which enables them to display side by side instead of each being 100% of the width of their container.

On the admin modules page, edit your menu module by going to its "Appearance" tab and then going down to the "Containing Class" input field. You need to enter a Bootstrap CSS grid class here. You can enter "col-sm-9". This means the menu will be 9/12 of the container's (the topbar's) width (Bootstrap's grid is 12 units wide). Then edit the search module and enter "col-sm-3" in its "Containing Class" input field, so it will be 3/12 of the container's width.

You can experiment with other numbers if the 9/3 proportions aren't good for your menu, etc. If you were to add another module, you'd need to reduce the other modules' widths somehow so that they all total 12/12 together.

By the way, the "sm" in "col-sm-9", etc. means that in small displays up to the largest displays, the modules will be side by side, but in xs (extra small) displays like phones, they'll stack vertically.

Hope that helps. Post again if there's still a question.

-- Gary

posts: 37

That totally worked, but I still have the word "Search" below the search bar, not the icon next to the bar.

How do I change the word to the icon and get it next the the bar? (Again, like on this page)

Thanks SO much for all the help! School is starting and I'm debuting the first part of my flipped classroom project on Tuesday!


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