Header Not Being Responsive
Not being responsive would mean it does not “respond” or change when viewed on different devices: ie the header would look exactly the same on mobile devices as it does on desktops.
But from your description, and from what I can see, this is not the case: even your menu changes from a horizontal menu on desktop to a hamburger menu on mobile. So your header is clearly responsive.
You may not have the mobile hamburger menu positioned where you want it to be, but that’s such a long stretch to call this “not responsive”.
… but when actually viewed on a phone the header mushes down and the navigation button goes below the icon, I want it all in the same horizontal row.
When you say “icon”, are you referring to your site’s logo?
To have the logo and hamburger menu on the same line, you need to set flex-wrap: nowrap on the parent flex container containing these two elements. In theory, you should be able to do this from Site Editor as you’re using an FSE theme… but I can’t direct you where to go and what to do.
It seems you have the ADDITIONAL CSS box enabled already (this is hidden by default in FSE themes), so an alternative approach is to simply add the following custom CSS in there:
.wp-block-group.wp-container-6 {
flex-wrap: nowrap;
}Standing by for feedback.
Legend, thank you so much!