Navbar menu search at mobile size

[sporeventexplosion]

Description (What went wrong?):
The current Bootstrap CSS for the navbar search seems broken when at mobile resolution (i.e. the resolution which makes the hamburger menu show). The search bar becomes very narrow, pulled to the right, and shows white bars above and below (may be because of a "hack" used to display the search bar).

Reproduction Steps (What did you do?):
Resize the window width until the navbar menu changes to a hamburger menu button, open the menu, and the broken search bar can be seen.

Expected Behavior (What do you think should have happened instead?):
First, the white lines possibly should not be present, and it may be better if the search bar filled the whole width of the menu instead.

Also, the issue doesn't seem to exist when using the example navbar from Bootstrap, so this is likely because of custom styling.

Environment (OS/Browser/Plugins/etc):
Should be a browser-independent CSS problem. Reproduced in either Firefox or Chrome

[sporeventexplosion]

Seems to have something to do with float: right that applied regardless of media query. The search box was fine when I disabled the property (see image);

[HebaruSan]

The original description sounds familiar for anonymous users:

But for logged in users, the search bar disappears completely in mobile:

Also the Log Out option is gone, bizarrely.

[HebaruSan]

Also the Log Out option is gone, bizarrely.

Aha! The menu scrolls vertically! And that's also where the search box was: