Menu Issue

General ShopSite user discussion

Menu Issue

Postby ametron » Sun Feb 24, 2019 3:33 pm

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 ?
ametron
 
Posts: 27
Joined: Sun Apr 25, 2010 3:15 am
Location: California

Re: Menu Issue

Postby cyoung » Tue Feb 26, 2019 11:06 am

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.
cyoung
 
Posts: 134
Joined: Wed Nov 09, 2016 11:01 am

Re: Menu Issue

Postby ametron » Tue Feb 26, 2019 6:45 pm

Makes perfect sense
Thanks for your help.
Douglas
ametron
 
Posts: 27
Joined: Sun Apr 25, 2010 3:15 am
Location: California

Re: Menu Issue

Postby ametron » Thu Feb 28, 2019 4:11 pm

Using the Walmart.com example
Walmart has H4 tags for the department headers
If possible, how can I format the 1st level text ?
ametron
 
Posts: 27
Joined: Sun Apr 25, 2010 3:15 am
Location: California

Re: Menu Issue

Postby ShopSite David » Mon Mar 04, 2019 4:04 pm

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}
-David H.
ShopSite, Inc.
http://www.shopsite.com
ShopSite David
Site Admin
 
Posts: 312
Joined: Fri Aug 04, 2006 1:30 pm
Location: Utah

Re: Menu Issue

Postby ametron » Mon Mar 04, 2019 5:13 pm

Thanks very much
ametron
 
Posts: 27
Joined: Sun Apr 25, 2010 3:15 am
Location: California


Return to User Forum

Who is online

Users browsing this forum: No registered users and 35 guests

cron