Overlapping Text in navigation menu error

Hi - In the navigation menu, when I click on the first drop down, the text at the bottom of the list crowds over the other drop down items.

I have attached a pic for reference - is there anyway I can increase the length of the dropdown box for these items only (it's a long list!)

Can you share link to your site?

Yes: https://www.marisagarnerassociates.com

Thank you!

5 minutes ago, MarisaGarner said:

Yes: https://www.marisagarnerassociates.com

 

Thank you!

 

Looks good here....Which device did you use?

my laptop - it's the same in safari or chrome - I have attached a screen shot showing how the text crouds over the drop downs further down the list 

Any ideas? I can't see an obvious way to correct it? Thanks!

Hi - still can't seem to correct it? I've included a screenshot above of how looks...

It may just be a list limitation in the code of the template? I don't know how to alter the source code...

Hi, I still haven't got this resolved...

In the primary navigation menu, when I click on the first drop down option, the text at the bottom of the list crowds over the other drop down menu headings.

I have attached a pics for reference - is there anyway I can increase the length of the dropdown box for these items only (it's a long list!) 

Is it a limitation of the amount of links you can have in a menu?

The website is: https://www.marisagarnerassociates.com/

Many thanks!!

Add to Home > Design > Custom CSS

.cs-menu-submenu-open ul {
    max-height: 100% !important;
}

On 11/19/2019 at 10:29 AM, MarisaGarner said:

It may just be a list limitation in the code of the template?

Hi Marisa. There's a limitation set on the maximum amount of space assigned to the items in the nav folder, so this effectively limits the number of items before you see this overflow. By default, the maximum height of the folder is set to 1000px. I think the best option is to override this height limitation with some CSS. For example, add this to Design > Custom CSS:

.cs-menu-submenu-open ul {
  max-height: 1218px;
}

Alternatively, you could reduce the spacing between the items in the nav folder so they take up less space but this could impact usability on touch devices:

.cs-menu a {
  padding: 11px 30px;
}

Let me know how you get on.

-Paul

I've posted in your original question @MarisaGarner as it's better to keep everything together.