Hello johnny

Please follow the steps.

1. Take a custom header. Please follow this documentation
2. Then made 2 header rows.
3. Assign 1 to show only on desktop or bigger screen.
4. Assign other to show only on mobile or smaller screen.
5. Then adjust the positions of the logo. For example, on bigger screen set logo + menu, on smaller screen set menu + logo.

Best regards

Hi there!

Thanks for contacting us.

You may try the following code in your custom CSS:

@media (max-width: 991px){
#sp-logo {
    width: 100%;
}
#sp-header .logo {
    float: right;
}
}

Note: Path towards custom CSS(Joomla 4): System>Site Templates Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

https://prnt.sc/5mBuSRh907N3

https://prnt.sc/ooiq-lkMEXr_

https://prnt.sc/nunlX-f5AhK1

Best Regards

You're always welcome:)

Have a nice day!