Menu bar on mobile devices

I have left two issues with the menu bar. Also, I have made some changes, mainly I reduced the height of the header image and I also fixed the header and menu, so they don’t scroll off the screen.

1) On a mobile device (or just reducing the width of the browser window on the desktop) the menu starts wrapping to a second line. However, the content below is not moving with it. I have enough space, but it looks ugly. How can I make the content below be dependent on the height of the menu bar, as it is wrapping menu items?

2) On a mobile (touch only) device, I can’t navigate the menu. I had temporarily removed the header image, and saw the content behind the menu is moving as I swipe up on the screen. This maybe related to me playing with the z-index stuff (to make the header and menu stay on top of the content, when content is scrolled up), yet it’s still weird that the gesture affects the behind the menu content, rather than the menu itself. By the way, on a smartphone screen the menu is larger than the screen height, so effectively I can’t reach all items.

The site, if you want to take a look, is at https://berzau-consulting.com/.

Thanks, Frank