Need help swapping elements and repositionsing mobile navigation menu for mobile layout using the Boostrap 4-based Understrap theme development framework

egoselfaxis
egoselfaxis used Ask the Experts™
on
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:

http://dev.movingpicture.com/

(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:

Mobile Header - Navigation menu collapsed
Mobile Header - Navigation menu expanded
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.  

Thanks,
- Yvan
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,
 you can place them like this

Logo
Phone
Search field

Then they won't overlap.

Or  only show Search Icon then on click the field expand
This is possible with your menu script
https://www.megamenu.com/documentation/search-box/

Or lastly you can place it inside the menu like you did for Get a quote

Author

Commented:
I suspect that my question wasn't understood properly.  What you're suggesting doesn't solve my main problem with swapping the search box with the navigation menu on mobile.  

I still haven't found a solution for this, and am fairly certain that I won't.  Still, thanks anyways.

Author

Commented:
I'm giving up on this one .. and am in the process of trying to convince the designer to go back to the drawing board.

- Yvan
Hi,

To get more idea you can check on themeforest
https://themeforest.net/category/wordpress 

You will see different way to deal with this, just resize the theme to see the result.
Menu and top menu are the most complicated part of the theme and when you use or check premium theme you can get solution that will save you a lot of time and this is affortable for professional themes
I convinced the designer to allow me to re-configure the mobile layout.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial