responsive menu vanishes

4 Replies ·

  1. I recently noticed that with tablet or smartphone viewing the hamburger menu is no longer displayed on my site, https://www.porkopolis.org/ which uses amy own child theme of Stargazer. I’m not at all sure how long it has been like this.

    I found https://themehybrid.com/board/topics/menu-responsive-design in the support forum, so I disabled all my plugins, then restarted them one at a time. The hamburger menu was visible until I reactivated Jetpack.

    In the Jetpack plugin directory I found approx 76 instances of the “.screen-reader-text” in 48 different CSS files. Seems like too many instances to ask the Jetpack team them to change…

    Guess I need an expert suggestion on where to go from here, please.

  2. Justin Tadlock

    It looks like the Jetpack social icons stylesheet is doing this. It’s expected that themes set the .screen-reader-text CSS (it’s a core WP class for themes to style). I guess Jetpack has other plans. 🙂

    Adding this to your style.css should fix it:

    @media only screen and (max-width: 1024px) {
    
        .ltr #menu-primary .menu-toggle button {
            margin: 10px 0 10px 1.5rem;
            position: relative !important;
            height: auto;
            width: auto;
            clip: initial;
            clip-path: none;
            overflow: visible;
        }
    }
    
  3. Dan at Porkopolis

    Hi Justin,

    Thanks, that was a great start. The main menu became visible, but I had to add an additional line of code for the secondary menu to also be visible. So:

    
    @media only screen and (max-width: 1024px) {
    
        .ltr #menu-primary .menu-toggle button,
        .ltr #menu-secondary .menu-toggle button {
            margin: 0 0 10px 1.5rem;
            position: relative !important;
            height: auto;
            width: auto;
            clip: initial;
            clip-path: none;
            overflow: visible;
        }
    }
    

    I did some additional CSS for color and placement, and ended up with this:

    
    @media only screen and (max-width: 1024px) {
    
        .ltr #menu-primary .menu-toggle button,
        .ltr #menu-secondary .menu-toggle button {
            margin: 10px 0 10px 1.5rem;
            position: relative !important;
            height: auto;
            width: auto;
            clip: initial;
            clip-path: none;
            overflow: visible;
        }
        .ltr #menu-secondary .menu-toggle button {
            margin: 10px 25px 10px 1.5rem;
            background-color: #bea9a9;
            color: #000000;
            padding-right: 12px;
        }
    }
    

    That leaves just two questions:

    1) is my above code “OK” or is there a more proper way to do this?

    2) I’d like to remove the lable “main-nav1” from the main menue – how best can I do that?

  4. Justin Tadlock

    Sorry about missing the secondary menu. I was just focused on the primary.

    1) Your code looks good to me.

    2) Stargazer will automatically pick up the name of your menu that you create under Appearance > Menus in the admin. You can rename it to something like “Navigation” if you just prefer a nicer-looking name.

    But, if you prefer to just hide the text, the only way to really do that is to constrain the size of the button so that the text doesn’t appear. I’ve modified your above code a bit to set the dimensions to 30×30 on the primary button to hide the text when it overflows.

    @media only screen and (max-width: 1024px) {
    
        .ltr #menu-primary .menu-toggle button,
        .ltr #menu-secondary .menu-toggle button {
            margin: 10px 0 10px 1.5rem;
            position: relative !important;
            height: auto;
            width: auto;
            clip: initial;
            clip-path: none;
            overflow: visible;
        }
    
        .ltr #menu-primary .menu-toggle button {
            width: 30px;
            height: 30px;
            overflow: hidden;
        }
    
        .ltr #menu-secondary .menu-toggle button {
            margin: 10px 25px 10px 1.5rem;
            background-color: #bea9a9;
            color: #000000;
            padding-right: 12px;
        }
    }
    
  5. Dan at Porkopolis

    I understand your last reply. I realized that my problem with the title showing was in my choice of a name – “main-nav1”. I did not realize I could change that name so easily, so I changed it to “MENU” and left it visible. I think it looks fine now. I did a bit more color/location tweaking to the secondary menu and now it is good too.

    I am always appreciative of how easily someone like me with a simple skill set can build pretty much exactly what I want with Stargazer. Your patient and accurate support, as well as that of other members in the forums is a continuing part of my success as well.

    Thanks again, Justin!