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

Store Design
, , , , ,
1

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 1
Image 11917×1079 446 KB

IMAGE #2

Image 2
Image 2517×1077 369 KB

IMAGE #3

Image 3
Image 3533×1079 77.2 KB

2

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