Hello There,
Thanks for writing in!
To resolve your issue, you will have to create two bars for your header and footer. The first bar would be for desktop screens 1200px and up and the second bar will only be visible for smaller screens. You can do all this by utilizing the “Hide During Breakpoint” options in your bar settings. To know more about “Hide During Breakpoint” option, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378
And if you wish to check how your bar or custom footer would look like on s specific screen size, you can use the responsive screen preview which can be found in the left panel.
Hope this helps.