I designed a CSS navbar that looks great on larger screens, but unfortunately it doesn't reflow well on mobile devices. One solution I thought of was to create a separate, mobile-friendly navbar and position it on top of the desktop version while hiding it with display:none. Then, I could use a mobile breakpoint to show the mobile navbar and hide the desktop version.
Is this a good practice in CSS? If not, is there a different method to display entirely different navbars for various breakpoints?
Update: Just to clarify, I am utilizing @media queries for the breakpoints.