Navigation Menu Sub Items Customisation

Hi there,

Can you add a custom class named long-menu-item to the two (long) parent menu items here:
https://www.screencast.com/t/MOwXQLbpw

Here is how to add a CSS class to the menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then add this CSS:

.secondary-navigation ul li.long-menu-item ul {
    width: 100%;
}

Hey Leo,

Oh, got it, do I also need to use this:

white-space: nowrap;

I want all that menu item in 1 line if its more than 100% width then it should take more width but show each item in 1 line only.

Hello Leo,

OK I have made it this:

.secondary-navigation ul li.menu-item-4959 ul, .secondary-navigation ul li.menu-item-4960 ul {
	min-width: 100%;
	white-space: nowrap;
}

I guess this will do the job?

I guess this will do the job?

That should do.

Or I've edited the method in my initial reply so you can just add custom class to the longer parent menu items and don't have to keep adding on to the CSS.
https://generatepress.com/forums/topic/navigation-menu-sub-items-customisation/#post-2309276

Hey Leo,

Got it, just checked your edited reply, yes that makes sense, btw this code:

white-space: nowrap;

This will make the text be there in 1 line right?

Yes: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Hey Leo,

Cool thanks a lot for the prompt response and help as always, have a great week, stay safe :)

No problem :)