Search code examples
htmlcsswordpressgenesis

Show hidden secondary menu on mobile without setting primary menu to default expanded

I am using the "No Sidebar Pro" WordPress theme built on Genesis. By default, this theme hides the secondary/footer menu on mobile. StudioPress's support told me that removing the following from the CSS would allow the secondary menu to be visible on mobile.

.js nav {
  display: none;
  position: relative;
}

Indeed, this does show the secondary menu on mobile as desired, however now the primary menu defaults to being expanded on page load. When I kept the above code present as is, the primary menu would default to closed on page load.

How can I modify this CSS so that the footer menu shows on mobile, but the main menu defaults to closed?

Solution

  • Instead of removing those styles, add the following right below that. 

    .js nav.nav-secondary {
    display: block;
}

    This should fix your issue.