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.


posts: 4644 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

No records to display