creating responsive side menus

hi. i found this blog post:

https://premium.wpmudev.org/blog/how-to-add-side-menus-to-a-wordpress-theme/

this looks like pretty much exactly what i need, except that i want the side menu/link to appear only when on mobile devices (or in narrow windows). otherwise, i want the normal top menu that i have now.

how would i install this to make it responsive? is it simply a matter of setting up special css? if so, what would the css be?

thanks!

  • Michael Bissett
    • Recruit

    Hey @custom1,

    CSS would be the key, yes. Going from your description, it'd be a matter of hiding the appropriate menu at a certain screen width, like this (I'm targeting smartphone screens with this example):

    @media only screen and (max-width: 480px) {
      .name-of-class-for-main-menu {
        display: none;
      }
    }

    Of course, you'd change the mention of .name-of-class-for-main-menu with the appropriate CSS class/ID that your menu has.

    For a screen larger than 480px, this CSS code would be applied:

    @media only screen and (min-width: 481px) {
      .name-of-class-for-sidebar-menu {
        display: none;
      }
    }

    Once again, change the mention of .name-of-class-for-sidebar-menu with the appropriate CSS class/ID that your menu has.

    You can learn more about the use of media queries over here:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Also, if you're using Google Chrome, I would also advise reading this as well:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    As that covers the use of the Developer Tools for CSS debugging/testing purposes (among other things).

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.