You can include anything in your header navigation bar, such as your menu, logo, or even a search form. However, you need to be very careful when you add an input field to your header like this Bootstrap example:
Problem with iOS 11
An issue I found about having an input field on a header or popup modal in iOS 11 is that when you focus on your input field, the keyboard will appear and you will see that the page will scroll automatically so you can see the input field. However, it is not actually scrolled at the ‘hidden’ layer, so you will notice that the cursor will blink underneath the keyboard or when you click any button, you will be redirected to another page. Or even, when you click on an empty space, it will also go to another page!
Here is how you can fix it:
When the navbar is toggled or when the popup modal appeared, simply add ‘position: fixed’ to your
tag.If you know any other solutions to this, share your ideas below!