Issues with Menu Responsiveness

[karismorrall]

I’m having issues with the appearance of the menu on our website. It looks fine on my computer (screenshot below).

However, on my coworker’s smaller 10-inch screen, the logo floats above the menu.

Is there any way to make the logo image responsive?

I have a different problem altogether with the menu appearance on a mobile device. For some reason, the website is showing a mobile version of the menu (preferred) in addition to the desktop menu. How do I get rid of the desktop version?

Thank you for your time! If you need any further information, please let me know.

[karismorrall]

This reply has been marked as private.

[Veena]

Actually it is showing only the responsive behaviour, when it reaches 1100px the menu and logo is not getting enough space to fit in one line.
To improve you can add the below custom CSS in themeoptions –

@media only screen and (max-width: 1100px){
#primary-menu {
  margin-right: 0;
}}

If you want you can switch the mobile menu earlier at 1100px.
And for getting rid of desktop menu in mobile version pls add the below custom CSS in themeoptions –

@media only screen and (max-width: 767px){
#primary-menu {
  display: none !important;
}}

[Author]

Posts