[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 2 months, 4 weeks ago by amusitz.

[Author]

Posts