Mega Menu: text alignment/wrapping and adding to all site pages

[ShannonWyss]

Hello, again, Themeco people.

I’m working on creating a navigation menu for my site. I started out with Max Mega Menus since it’s one of the disability accessible menu options out there. But i can’t make it display a header menu, only a sidebar menu. Perhaps there’s a conflict with something in X.

So here i am, working on a mega menu component through Cornerstone. I’ve successfully created a mega menu, pictured below.

I have two questions:

1. I have the font super large because i want one column of text and can’t figure out another way to do this. This approach isn’t ideal, though, because the text is way too big and, more importantly, i want the text on my menu items to wrap to the next line so that there are no ellipses cutting off the words. I can’t find anything on text wrapping or text alignment. Where can i find how to do this? (The “Use Your…” and “Ideas for…” ellipses are intentional; the others are because i can’t get the text to wrap.)

2. I also want to add this menu to the right side of all of my pages. How do i do that? I can’t find somewhere to edit an overall site template.

Thanks so much for any insight you can provide.

[nabeel]

Hi Shannon,

Thanks for reaching out. To better assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks!

[ShannonWyss]

Thanks, nabeel.

The URL is reflectingrainbowtweensandteens.lgbt. But the site isn’t launched yet so that won’t do you much good. I’m on a flight that’s about to close. I’ll send you a private message with my admin login but that might be a while.

–Shannon

[ruenel]

Hey Shannon,

To make sure that the items do not go outside of their container, always set the maximum width to 100% or even less.

You may need to adjust the left and right margins and paddings as well. And adjust the font sizes too.

Best Regards.

[ShannonWyss]

Thanks so much, ruenel. This helps.

I now have what’s below:

The font is much more reasonable. However, i’ve played around with the margins, padding, and font size and can’t get everything in one column. I also still can’t force the text to wrap.

What am i missing?

[tristup]

Hi Shannon,

I would suggest you use the Navigation Layered element instead of Navigation Inline in this case.

Thanks

[ShannonWyss]

Thank you so much, tristup. This is fantastic and exactly what i wanted!! I’ve deleted the Navigation Inline so that only the Layered one is there. I’m super excited about this.

My last question (for the moment): how do i add this to my pages? Right now, the component is floating out there disconnected to everything. I’d like it to show up on everything but my two home pages.

[ruenel]

Hello Shannon,

Where do you want it to be placed on the page? Is it on the header or footer? It may not be possible since you are using the X theme. There is no Header and Footer Builder that allows you to create a custom header or footer.

Best Regards.

[ShannonWyss]

I was originally thinking of this as a header menu. But the way it’s set up, that doesn’t seem like it would really work.

So i’m hoping i can use it as a sidebar, along the right side of the page. The left side would work, too, if the right isn’t possible. In either case, it would replace my current left sidebar.

[ruenel]

Hey Shannon,

Even if you export the Component and use a shortcode inside an HTML widget for your left or right sidebar, you might still need a custom CSS to be able to position the MegaMenu on the sidebar correctly. This is worth a try.

Best Regards.

[ShannonWyss]

Thanks, ruenel.

Is there a non-CSS way to use this component anywhere on my site? Or is CSS going to be needed because i’m using X? It doesn’t sound like it will work as a header or footer menu, either, although the latter wouldn’t be particularly useful anyway.

[ruenel]

Hello Shannon,

The custom CSS is needed to properly position the toggle of the Dropdown. There is no other way around since the Header and Footer Builder are not available.

Thanks.

[ShannonWyss]

Okay, got it. I’ve started a list of the CSS stuff i’ll need to have someone else do.

I have one final question (although i know i’ve said that before).

In the screenshot below, how can i do these two things?

1. Make the arrows match each other regarding their styling (i’ve poked around and, while i’ve found where the arrows live, i can’t find a forward/back pair that are similar to these styles but both match each other), and

2. Decrease the contrast on items that are hovered over – or maybe just use a different color. I’m concerned that the gray doesn’t have enough contrast for low-vision folx.

[ruenel]

Hello Shannon,

1.) The Back arrow is using a plain text.

If you want an icon like the indicator, you can use [x_icon type="arrow-left"] Back

2.) You can change the interaction color of the links to something else. Use the color picker.

Best Regards.

[ShannonWyss]

Thanks you so much, @ruenel. This is super helpful.

One last (maybe) related question. I input a couple new global colors and they’re not updating throughout my site. The one for links, especially, would be helpful because the blue i was using didn’t have enough contrast with the white background. I changed it to a darker blue but couldn’t see any difference in my website.

I then changed it to a ridiculous teal that is definitely NOT contrast-y enough but just to test things out. That didn’t change, either. You’ll see the teal in the “Link” on the attached screenshot.

I seem to be missing a step and can’t find the answers online.

How do i get Cornerstone/X to use the global colors i’ve set? Or, rather, how do i get it to update a color i’ve changed?

[ruenel]

Hello Shannon,

This is the Color Manager where you can set your Color Palletes. After creating the color, they should be applied to an element setting or in the Theme Options so that it will be applied to that element or site wide. For example, if you want to use the “Color 1”, you can set in Cornerstone > Theme Options:

Best Regards.

[ShannonWyss]

That worked! Thanks so much, @ruenel.

I promise to leave you alone – at least until my next question arises.

Super appreciate your assistance.

[nabeel]

Glad that we could be of help.

Cheers!