I work for a client that wants his booking engine to be sticky at the top of his website.
It’s a script/iframe.
I decided to use main menu to display the booking engine with the logo and use the secondary menu to display the proper websites menu.
I managed to make it work until @media max-width:890px.
From this screen size booking engine is overlapping on top of the logo. (I opened a support topic regarding this issue to see if it’s possible to change the logo to another one much smaller, but at the end this will only delay the problem.)
So I’m looking for a good solution. If any ideas comes to your minds I would be very greatful !
You can check the test website in “private informations”.
Ideally I would try on smaller screens :
– Display another logo (square)
– Reduce dates fields in the booking engine (I have a lot of struggle to do so)
And on mobile :
– Maybe center the horizontal logo
– Put the booking engine under logo
Another solution for mobile would be insert booking engine inside a classic mobile main menu with overlay. But in that case it would be better to also use main menu for proper menu items, so rethink everything… or see if there is a way to say “for mobile size use this menu configuration instead of the other one”.