responsive menu vanishes

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;
    }
}

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?

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;
    }
}

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!