Inline menu needs multiple lines

[mwr1701]

I have two issues…
I’m trying to put an inline menu in a section of a layout that I am building for my shop.

I have the menu in, but there are too many items to fit in a single line, so it is cutting them off. I have tried using the “wrap” for flexbox on the menu level, the topic links level, and even on the parent column, and I just cant seem to get the items to wrap to a second line.

Next issue is that the dropdowns from the menu are being hidden behind the products in the layout. I assume this has something to do with z-indexing, but I am not seeing where to adjust that for the menu,

[prakash_s]

Hello @mwr1701,

Thanks for writing to us.

Since there are too many menu items in your navigation area and space is less with respect to menu items so I would suggest you decrease the font size and padding between menu items so that the menu items get aligned in that space.

Yes, it seems that it is an issue of Z-Index, I would suggest you go to the Cornerstone page builder --> Section/Row–>Z-Index–>Set the Z-Index value as “99”.

Please have a look at the given screenshot below.

Hope it helps
Thanks

[mwr1701]

Thank you… The Z-index fixed the issue with the hidden drop downs; however, the issue with the multiple line menu is that, as the screen size gets smaller, I would like the menu items to wrap to a new line. There was a similar thread on July 1, where ruenel solved the issue by using the wrap option, but I can’t seem to zero in on which wrap I need to turn on to make it work.

In a layout, I have:

Section->row->col->inline nav

I’ve tried the wrap option on all levels (except section), and none seem to have any effect.

In the attached image, I would like to see two lines both inside the orange box.

[ruenel]

Hey @mwr1701,

You can enable the Wrap option in the Flexbox settings so that the menu items will go to the next line when there isn’t enough room in the first line.

If that does not work for you, kindly provide us access to the site so we can check your element settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Hope this helps.

[mwr1701]

Secure not sent… <---- should be secure NOTE sent… sorry about that typo

I did get something to work using Layout CSS, and giving the menu an ID… but the WRAP options weren’t doing anything for me. I’d be interested to know how the WRAP options from the layout builder could be set for this.

One other question… is there some option that would put an indicator on the top of the submenus pointing to their owning top links, or under the toplink text indicating which top-link is open? kinda the reverse on the sub-indicator… I can make something work with text styling colors… just curious if that is an option somewhere.

[ruenel]

Hello @mwr1701,

Your navigation inline element is already wrapping to the next line in smaller screens.

Your custom CSS may no longer be necessary. We highly recommend that you turn OFF any caching plugin first so that you can easily see all the site changes taking effect.

And yes, there is an option to put a sub-indicator on top of the submenu. All you need is to go to Navigation Inline > Top Links > Sub Indicator.

To display the sub-indicator right below the top links so that it will also display above the submenu just like this:

You will just have to set the Child Placement of the top links, Menu > Top Links, into Columns.

Best Regards.

[mwr1701]

Strange… I removed my Custom CSS, and the inline navigation streched back out again as in the first image I showed. Put it back in, and all was right again… I’m ok with the custom CSS i put in, was just curious why the wrap solution in the layout builder didnt do what I wanted.

The sub-indicator worked… I was looking at it as showing that there was a sub-menu (pointing down), but after seeing your recommendation, I thought it through and just turned the indicator upside-down, and set to transparent base color, black interaction. Result is exactly what I was looking for!

Thanks!!!

[ruenel]

You are most welcome @mwr1701.