Issues with Menu Responsiveness

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #15285
    Karismorrallkarismorrall
    Member

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

    My Computer

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

    Smaller Screen

    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?

    Mobile View

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

    #15287
    Karismorrallkarismorrall
    Member
    This reply has been marked as private.
    #15296
    VeenaVeena
    Moderator

    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;
    }}
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Invent Theme Support’ is closed to new topics and replies.