[amusitz]

Hi There,

I have 2 questions

1. I would like to change the displayed text “Menu” when Primary Menu is collapsed on smaller screen sizes, like mobile phone. As default, it is “Menu”
   1. It is displayed as: <span class=”menu-label”>Menu</span>
2. How would be possible to turn off collapsing Primary Menu on mobile devices? I have there only 2 menu items, which should be always visible.

Thanks in advance 🙂

[sujapati]

@amustiz: Thanks for the query.

1. Currently we don’t have  beult-in feature for  changing  the label texts.  You’ll need to add custom CSS direclty on your site to modify it

.menu-toggle-wrapper .menu-label {
    position: relative;
    display: block;
    overflow: hidden;
    color: transparent;
}

.menu-toggle-wrapper .menu-label:after {
    content: 'Demo Label';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    z-index: 9;
}

(Note: You can change the  content: “demo label” as per your site requirements)

2. Similary add the following CSS to make the menu visible on all devices.

@media screen and (max-width: 767px) {
    body .menu-toggle-wrapper {
        display: none;
    }
    body .menu-inside-wrapper {
        display: block;
        position: relative;
        left: 0;
        top: 100%;
        width: 100%;
        z-index: 999;
    }
}

Please feel free if you need any further assitance.

Kind Regards,
Sujapati

[amusitz]

Hi @sujapati,

Many thanks for your support, I was able to manage both. As I wanted to act my primary and secondary menus differently, I changed a bit the css code, to have the followings:

• Change label only for secondary menu, as primary menu will be set to do not collapse, so “Menu” label will not be displayed anyway at primary menu
• Apply do not collapse part only for primary menu

I sharing here the modified code too, in case somebody interesting for this logic.

Have a nice day.

Change displayed menu label on secondary menu:

#secondary-menu-wrapper .menu-toggle-wrapper .menu-label {
position: relative;
display: block;
overflow: hidden;
color: transparent;
}

#secondary-menu-wrapper .menu-toggle-wrapper .menu-label:after {
content: 'Your expected label';
display: block;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 9;
}

Set Primary Menu to do not collapse on small screen size:

@media screen and (max-width: 767px) {
#primary-menu-wrapper .menu-toggle-wrapper {
display: none;
}
#primary-menu-wrapper .menu-inside-wrapper {
display: block;
position: relative;
left: 0;
top: 100%;
width: 100%;
z-index: 999;
}
}

 

• This reply was modified 1 week, 2 days ago by amusitz.

[sujapati]

@amustiz: Glad to hear you were able to resolve it on your own. You’ve handled it really well.

Let me know if anything else comes up!

Regards,
Sujapati

[Author]

Posts