Navbar menu issue on screen with 800px width

[abollini]

Describe the bug The search feature in the navbar is problematic in screen with a width around 800px, At such size, attempt to use the search will result in overlapping between the query input and the other navbar links. The issue becomes more evident if more links are put in the navbar or a wider logo is used

To Reproduce Steps to reproduce the behavior:

1. set the screen size at 800px
2. open the home page
3. try to search using the navbar

Expected behavior the query input should happen in a modal box, overlay at the middle of the page or in a new line under the current navbar so that it will not interfere with any other navbar entry. This could help in addressing the need expressed in https://github.com/DSpace/dspace-angular/issues/695 as we can think about a radio button that would allow the user to choice between a global search and a search in the current community/collection

Related work https://github.com/DSpace/dspace-angular/issues/695

[tdonohue]

@abollini : This appears to be browser specific & possibly specific to Firefox?

It's not reproducible in Chrome (v95.0.4638.69) or Microsoft Edge.

However, I do see the overlap if I use Firefox:

I think this should be treated separately from #695, as that's a new feature which I feel needs more discussion. This NavBar menu overlap issue seems specific to Firefox browsers & therefore likely a small CSS tweak would fix it.

[abollini]

4Science would like to work on that. Our estimation is 4 hours. The plan is to make an overlay over the header menu to make sure that the search input is always visible with good contrast

[tdonohue]

Thanks @abollini . I'll assign to @atarix83 and add the estimate.

[davide-negretti]

I created a new PR #2015 without the blur effect