You will need to write some CSS for your menu to handle responsive break-points (CSS Media Queries). Specific CSS for your site is beyond the scope of the support I am able to provide. This plugin does not apply any JavaScript or CSS to your menu, it only aims to get the right HTML structure being output to the page, and leaves the rest up to your active theme.
With that said I can speak broadly about different strategies some people might choose when dealing with a menu with the logo in the middle on responsive sites.
One basic strategy is at mobile break points the menu logo gets assigned a CSS rule of display: none;. Simultaneously another logo that is perhaps positioned elsewhere in the header (maybe above the menu?), and was previously hidden with display: none;, is now given display: block; at mobile break-points.
Some fancier/more advanced versions of this might move the mobile menu into a ‘hamburger menu’ pattern where clicking a little menu icon will toggle open/close the menu using JavaScript. Additional CSS styling is usually used here to make the menu a stacked list, or sometimes even a full screen menu.
Depending on what you are looking to do with your site, the strategies above might point you in the right direction. There are infinite variations of menu’s and ways people choose to handle them on different devices so you will want to do some experimenting and see what makes sense to you for your site.
I hope this helps!
Matt Keys
