I'm currently developing a new WordPress site for a client using the Bootstrap 4-based Understrap theme development framework, and am running in to some difficulty translating the custom design that I was provided with into a responsive WordPress theme. Here is a link to the site .. still a work in progress, obviously:
(I've been focusing exclusively on the header and footer, you'll notice).
I've made some significant progress, meaning that I've got the desktop layouts pretty well figured out and displaying nicely (ie: 1920px, 1366px, 1280px, etc.). I just need some advice on how best to handle the mobile layout, .. meaning the tablet and phone-based viewports (ie: 992px, and 576px), You see, the designer provided me with comps for the mobile layout significantly later than anticipated, .. sort of like an afterthought, and without much understanding of the way Bootstrap works.
Here are some images depicting what's expected for the mobile layout:
You'll notice 2 significant things that are particularly problematic:
1) The hamburger icon for toggling the mobile navigation menu and the search box have been swapped
2) The expanded mobile navigation menu is being displayed under the search box - instead of directly underneath the hamburger icon (the latter of which is the standard, default behavior)
So my questions are ..
1) Is there any clever kind of way that I can "swap" the mobile navigation menu toggle and search boxes, .. perhaps by rethinking and re-coding the way I've already built the header (ie: using nested rows, with the contact info and search box in the top row, and the navigation menu in another row below it)? Or do I have to duplicate these 2 different elements and then hide the mobile version on desktop / hide the desktop version on mobile, etc?
2) How would I go about getting the expanded mobile navigation menu to display below the search box (as shown in the image) .. instead of directly underneath the hamburger icon?
Any help would be appreciated.