Add a “fixed” div in responsive footer menu

In the following w3schools code that implements a responsive menu at the bottom of a webpage, I have added a div with a copyright claim for the domain. I would like to make the copyright div centered in the bottom of the screen as long as it is not covered by the menu items, as the browser window gets smaller, and then move again at the bottom of the page bellow the menu items when it gets covered by them or when the menu is opened by the relative button when it previously has minimized.

desktop media query affects the mobile view

I have a problem where I created the first mobile view and then want to add the desktop, iPad, etc… But when I do add a media query for the “desktop view (like I want to believe)” it affects the look for mobile view.
What can I do to make the breakpoint for the desktop view, but so it won’t affect the mobile, screen width, and iPad.
*Link for the full code: