CODEWITHSUNDEEP
bootstrap-4navbarsearchbar
Mydisname
Mydisname

Reputation: 213

Bootstrap 4 full-width search bar without navigation break

Thanks to Bootstrap 4 we can finally and easily without hacks create full-width search bars in the navbar.

Unsing something like this 

<form class="ml-3 my-auto d-inline w-100">

we can create such a beautiful full-width search bar as we can see here:

https://www.codeply.com/go/sbfCXYgqoO

What I still struggle with is multi-word navigation links.

E.g. you can see here at the Stackoverflow navigation the links "Questions" (one word) but also "Developer Jobs" (two words). This is nothing special, but the solution struggles with it.

If you add such a multi-word navigation link to the example provided, the navigation link will break/ force a line break and also the navbar height increases:

https://www.codeply.com/go/BO4QBpaqYD

I would like to force the multi word navigation links to stay in one line and forbid the line break and therefore also keep the navbar height.

Any ideas how to solve this issue?

Thanks and best

Upvotes: 0

Views: 1182

Answers (1)

mahan
mahan

Reputation: 14935

You are using the class name w-100 on the form. It sets the width of the form element to 100%. Therefore, there is not enough place and hence the text breaks.

Use flex-grow-1 instead to fix the issue. It sets the flex property of the form to 1. 

<form class="mx-2 my-auto d-inline flex-grow-1">

Doing so, the form takes all the free space inside the nav.

You must use Bootstrap 4.1 since the lower version does not have that class names.

check this pen

Update

You might be tempted to use text-nowrap which might fix the issue. But you should not use it because it only prevent text from wrapping and the problem is still there.

Upvotes: 1

Related Questions