So got it working making use of @Eduardo suggestion - I did the following:
- Created a duplicate element and set the className to hide - set to Display: None in css
- Created further two classes I names hide_mobile and show_mobile and in my css folder I placed 2 portions of each having opposite effects, under the mobile portion of my CSS hide_mobile hides and show_mobile shows and the opposite occurs on the desktop portion of my CSS
- Linked all these classes to varying callbacks to hide my current filter dropdown when an action occurs on mobile and show the Navbar with the containing filter dropdown which is set to fixed: top in the Navbar properties.
This gives me the desired result - I did have to do some serious changes to my callbacks but that is my app specific issues that were affected by this change.