Jump to content

Store's category hovering menu do not work for all categories

Recommended Posts

Hello everyone,

 

I am on 7.1 version. In my websites' store page I have a vertical category menu on the side. I want to show all sub and sub-sub categories in a pop-up box when I hover over categories. I almost achieved this, but my solution only works when I enter one of the categories and it only works for the category I am already in. Also, it do not show third level, sub-sub categories.

It would be perfect if I could go to main store page, hover over category and it shows all (clickable) subcategories in bold text and deeper sub-sub categories in light text. When I enter any level category, I want menu to work the same way as in main page.

In addition, I would love for the category box to appear next to menu on the right, not on menu itself.

This is how menu looks like now:

image.png.da7384aee4445178946aeb09027bc2b4.png

This is how it looks when I hover on:

image.png.43e8a96c333c156bdbc7a2d898e17886.png

 

There is the code I have (I am not a good coder, just using what's found on internet or chatGPT):

/* General style for menu and sub-menu */
.nested-category-tree-wrapper ul {
  list-style: none; /* Remove default list styles */
  padding: 0; /* Remove default padding */
}

/* Hide subcategories by default */
.nested-category-tree-wrapper ul ul,
.nested-category-tree-wrapper ul ul ul {
  display: none !important;
  position: absolute; /* Position subcategories */
  background-color: #fff; /* Background color for the subcategories */
  padding: 10px; /* Adjust padding as needed */
  z-index: 1000; /* Ensure it appears above other content */
}

/* Display subcategories on hover */
.nested-category-tree-wrapper ul li:hover > ul,
.nested-category-tree-wrapper ul ul li:hover > ul {
  display: block !important;
}

/* Style the main category and subcategory items */
.nested-category-tree-wrapper .category-link {
  padding: 10px; /* Adjust padding as needed */
  color: #333; /* Text color */
  text-decoration: none; /* Remove underline from links */
  display: block; /* Ensure links take up full width */
  position: relative; /* Position main category relative to subcategories */
}

/* Additional styling for hover state */
.nested-category-tree-wrapper .category-link:hover {
  background-color: #eee; /* Background color on hover */
}

/* Debugging styles to check hover effect */
.nested-category-tree-wrapper .debug-hover {
  border: 1px solid red; /* Border for debugging hover effect */
}

 

 

This is my store page:

https://www.vijoklis.com/parduotuve

 

I appreciate any help. And sorry for my language, not native.

Link to comment
  • Replies 0
  • Views 82
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.