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:
This is how it looks when I hover on:
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.
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: This is how it looks when I hover on: 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.
