Main Menu Broken in Mobile

  • snow67

    (@snow67)


    5 months, 1 week ago

    Hello.

    I’ve run into an issue that I only discovered when I finally opened my site on my phone. On desktop, the main menu displays as a horizontal list of the the four pages, but in mobile the view is broken with the items widely spaced in a column. I would prefer a menu for mobile with the regular drop-down menu icon.

    How can this be achieved?

    • This topic was modified 5 months, 1 week ago by snow67.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • threadi

    (@threadi)

    5 months, 1 week ago

    The reason is an individual CSS you have stored in the Customizer. It is written there:

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
     border-bottom: 0px solid #333;
     border-top: 0px solid #333;
     display: inline-block !important;
     text-align: left;
     width: 100%;
    }

    This means that it is always immediately visible in every view.

    I assume you have added this so that the menu is displayed horizontally on the desktop. The solution would therefore be to adapt this individual CSS to the following:

    @media screen and (min-width: 800px) {
     .main-navigation ul.nav-menu,
     .main-navigation div.nav-menu > ul {
      border-bottom: 0px solid #333;
      border-top: 0px solid #333;
      display: inline-block !important;
      text-align: left;
      width: 100%;
     }
    }
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.