Menu Issue

[ametron]

Sub Menu doesn't display properly on desktop (mobile ok)
Columns overlap and to not align properly
Here is a link:
https://www.tvserviceparts.com/index.html

Just tried the demo store for the 'Jeans' theme and it has the same issue when submenu is 2 or 3 levels deep

How can I fix ?

[cyoung]

Other than the link words not wrapping (overlapping), the menu is working as designed. In this theme instead of having multiple levels of flyouts, it displays the sublinks already (like walmart.com) so that merchants can display multiple links and multiple categories at once.

The code will count the number of links and sublinks displayed and if it is over 15 or 20 links (I believe), they will be broken up over multiple columns. However, the code doesn't break up sections. It will break the columns as close to even, without dividing a parent categories sub categories over 2 columns. That is why the "Featured Part Types" only has 1 column. Because it only has 1 category, "TV", which won't be split over multiple columns. The "Categories" link on the other hand has 7 'parent' categories to display. The first 2 are long enough on their own to be their own column ("TV" and "Appliance"). Then the other 5 'parent' categories are all in the last column (3 of those 5 remaining don't have any sublinks yet).

So to use this template with this menu display, I would suggest that you break out the categories/subcategories into only 3 levels, not 4, and make each section of links a little smaller (not like "TV" under "Featured Part Types" which has close to 45 sublinks total, and not like "Appliances" under "Categories" which has over 20 sublinks), Or, if you want the regular navigation display (a single column), they would need to change the coding in this theme, which isn't a small task, but could be done.

I hope that makes sense.

[ametron]

Makes perfect sense
Thanks for your help.
Douglas

[ametron]

Using the Walmart.com example
Walmart has H4 tags for the department headers
If possible, how can I format the 1st level text ?

[ShopSite David]

Our designer says:

Correct, we don't have h4 tags, they are just regular links. However, you could use parent/child relationships in your CSS to get the formatting you want. It can get a little busy, but you shouldn't need much formatting. To just format the first sub category (parent category name within the flyout), you would use the following CSS:

div.fcontain > div > ul > li > a {your styles here}

[ametron]

Thanks very much