How to Make a Second Header Responsive and Integrate Menus Differently on Mobile vs. Desktop?

[EcoSouLife]

I've added a second header to my website theme using HTML and CSS. It looks great on desktop (see Image #1) but becomes unresponsive and disorganized on mobile, particularly with drop-down menus.

I'm looking to achieve the following:

1. Keep the current design for desktop as it is.
2. For mobile or smaller screens, combine the second header's menu items into the existing hamburger menu (see Image #2).
3. Place these additional menu items at the bottom of the existing list in the hamburger menu (see Image #3).

I'd appreciate any guidance or suggestions on how to implement these changes. Please feel free to reach out if you need more details. Looking forward to solving this together!

IMAGE #1

IMAGE #2

IMAGE #3

[EcoSouLife]

Are you able to help with the above issue?!?