HTML code in Mega Menu

[eldon99]

We have some menu options that are kinda lengthy, so we would like to add break tags to make them two lines. However it is not rendering the html. I tried to change the tags from "mvte" to "mvt" in the template for the mega menu, but that did not help.

Are there any suggestions, or am I going to have to forgo the mega menu Ready feature and just add it manually to the global header?

[eldon99]

Re: HTML code in Mega Menu

anyone... bueller?

[rajnishsi]

Re: HTML code in Mega Menu

Hi,

I believe it's not possible out of the box to make navigation sets render HTML content without escaping as they are being built in backend with other stuff of readytheme functionality. Entire href tag '<a ...></a>' is built in the module itself. I couldn't find any tokens as well to properly re-construct this afterwards either.

However, you can try,
1.) By some custom CSS for menu bar to make it adjust for the lengthy names, or,
2.) Write some JS to break it in 2 lines after the menu bar is rendered.

Any of above should get you what you need, but they require some custom dev work and to some extent will depend upon specific situations(It's possible to go universal, but that would be little more complicated.).

[Matt Zimmermann]

Re: HTML code in Mega Menu

Hi Eldon,

It is possible to make a CSS adjustment to make longer names wrap. However, it may take some fiddling to make it perfect, primarily in the "max-width" area.

In your "structure.css" file around line 376, update it to be like this:

.navigation-set > .level-1:first-child .level-2 .level-3 a,
.navigation-set ul .level-2 .level-3 a {
    border-bottom: 0 none;
    color: #818181;
    line-space: normal;
    margin-bottom: 0.25rem;
    max-width: 10rem;
    white-space: normal;
}

[bonnie1525]

Re: HTML code in Mega Menu

Hi Matt, I gave this a try, but nothing changed. Here is what I changed in structure.css:

.navigation-set li ul li:hover > ul {
display: block;
}
.navigation-set .level-3 {
font-size: 0.875rem;
line-height: 2;
margin: 0;
}
.navigation-set > .level-1:first-child .level-2 .level-3 a,
.navigation-set ul .level-2 .level-3 a {
border-bottom: 0 none;
color: #818181;
/* margin-bottom: 0; */
/* added next four lines to wrap text */
line-space: normal;
margin-bottom: 0.25rem;
max-width: 10rem;
white-space: normal;


}
.navigation-set ul .level-2 .level-3 a:after {
display: none;


Did anyone else have any luck in getting the longer names to wrap? Thanks, Bonnie

[bonnie1525]

Re: HTML code in Mega Menu

Never mind, when I moved the adjustments to the first level and it works beautifully.