Loading...
 
Features / Usability

Features / Usability


Re: search bar in menu bar

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

There are no comments at this time.