Dropdown menu on mobile - sublink to expand downwards in main column and not next to it

[IRIMAGE]

Hello, what menu tool should I use in order to make menu sublinks expand downwards in same column and not in new column next to the primary one where main links are shown? On some mobile devices menu that I have created “goes out” of the screen and if I make buttons and letters smaller so that they would be visible on all devices, google marks mobile version of the page as user unfriendly due to small menu elements. I would like to make links fullwidth on screen and links containing sublinks with arrow pointing down just to expand downwards.

I have created custom header with PRO theme in PRO headers using Navigation dropdown element for mobile view.

Thank you for the info.

Webpage adress
www.penzionspenko.si

BR, Peter

[friech]

Hi Peter,

Thank you for writing in, the navigation dropdown that you currently have is not ideal for small screens. Please use the Navigation Layered or Navigation Collapse for small and extra small breakpoints.

Utilize the Hide During Breakpoints feature to switch menu element between screen sizes.

Hope it helps,
Cheers!

[IRIMAGE]

Thank you. I am working on it. Is there any way to make menu appear from top edge downwards (Below main menu bar instead from right or left side of the screen?)

I have same situation on page www.ir-image.si. There I have pin graphic instead burger icon and I would like to make menu show downwards from this pin shaped icon.

Cheers!
Peter

[ruenel]

Hello Peter,

Mobile menu that show downwards from the icon can only be found in the default header. With custom header, you only have the Navigation Layered or Navigation Collapsed element. Navigation dropdown element is best to use for larger screens. This means that what you have in mind is only possible if you use the default header.

Hope this helps.

[IRIMAGE]

Thank you. It is ok that way as it is now with Collapsed element. Just one more question. I have a problem with menu showing in internet explorer (I know that allmost no one uses it anymore ) but with my luck … the client for whom I have created web page was looking the page in … yes IE … On all the other browsers in looks fine, just on IE it looks stacked all together. Screenshots below. Any suggestions for salving this issue?

IE browser

Mozilla

BR, Peter

[ruenel]

Hello Peter,

Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

And then in your IE browser, please clear your browser cache or use private browsing mode and test your site again.

Hope this helps.

[IRIMAGE]

Hello, thank you for you answer. I have done everything you have said but, menu still looks confused in IE browser. I don’t know what could be the problem and how to salve it.

[friech]

Hello Peter,

Yeah I can replicate that issue on IE, would you mind providing us login credentials in a secure note so we can take a closer look. It seems you did some unusual configuration on your container/element flexbox.

@Themeco

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Thanks,