PRO Header menu on mobile issue

[King]

Hi,

A couple of questions if thats ok.

1. I have used a pro header on my primary school site: https://hadleylearningcommunity.org.uk/primary/ and when viewing on a mobile phone the menus dont change to mobile responsive and are off the screen. Is there a solution for this. I have a secondary school site of https://hadleylearningcommunity.org.uk/secondary/ which i used a standard menu on and i would like my pro header on my primary site to work more like that on mobile if possible.

2. on my main site of https://hadleylearningcommunity.org.uk/ i have set the pro menu to slide in and on a mobile it looks great but to get off the menu if you dont want to select a link, you have to click on the tiny amount of background to the side. Can we make it close if you just click anywhere on the menu but obviously not on a link?

thanks guys.

[Alaa]

Hi @King

Thanks for writing in!

1- You will need to create a new bar in this header that’s only visible on mobile devices, this can be achieved following this guide:

In this bar, you can add the “Dropdown Navigation” element, it should be similar to the secondary website.

You can also use the same trick to hide the desktop menu on mobile devices.

2- I can see you are using the off-canvas element, it has own close button which you can adjust its color to something more bright so you can see it, because right now it’s very dark:

Thanks.