categories Dropdown button (in header bottom) scrolled up/down with mouse wheel.

Greetings,

I’m encountering two issues with the WoodMart theme:

1) Category Menu Overlapping Text:
On the Home Page, when the number of categories exceeds 11, the category menu extends over the text, as evident in the attached image. This seems to stem from a layout or styling conflict. I’m seeking guidance on how to adjust the CSS to ensure the category menu displays correctly without obstructing other content.

2) Enhanced Category Dropdown Interaction:
Currently, when I hover over the categories dropdown button, it expands to reveal the categories. However, I’d like to enhance this interaction. Specifically, I’d like the ability to scroll through the categories using the mouse wheel while keeping the dropdown open. Could you advise on the necessary JavaScript customization to achieve this functionality without affecting the overall site scrolling behavior?
Your assistance in resolving these matters would be greatly appreciated.

Warm regards

Attachments:

You must be logged in to view attached files.

Hello,

01.Can you please share the page URL for better understanding so I will check and give you a possible solution.

02. Sorry to say but right now there is no option in Theme Settings available for that.When we enable the scrolling effect with CSS, In this case the mega menu does not work. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

Best Regards.

I found a solution for the scrolling, not problem and it worked. made it with some style
css script :

/* Style for menu opener */
.wd-header-cats.wd-style-1 .menu-opener {
min-width: 300px !important;
background-color: #ef7f22; /* Default background color */
color: #ffffff; /* Default text color */
}

/* Style for dropdown categories */
.wd-dropdown-cats {
min-width: 300px !important;
background-color: #EAEAEA;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: 450px;

/* Custom scrollbar styling */
scrollbar-width: thin; /* For Firefox */
scrollbar-color: #EAEAEA #ffffff; /* scrollbar-color: thumbColor trackColor; */
}

/* Track */
.wd-dropdown-cats::-webkit-scrollbar {
width: 10px; /* Set width of the scrollbar */
}

/* Handle */
.wd-dropdown-cats::-webkit-scrollbar-thumb {
background-color: #EAEAEA; /* Set color of the thumb */
border-radius: 5px; /* Round corners of the thumb */
}

/* Handle on hover */
.wd-dropdown-cats::-webkit-scrollbar-thumb:hover {
background-color: #d87b31; /* Change color of the thumb on hover */
}

/* Track */
.wd-dropdown-cats::-webkit-scrollbar-track {
background: #ffffff; /* Set color for the track */
border-radius: 5px; /* Round corners of the track */
}

/* Handle when dragging */
.wd-dropdown-cats::-webkit-scrollbar-thumb:active {
background-color: #d87b31; /* Change color of the thumb when dragging */
}

/* Style for menu links */
.wd-header-cats ul > li > a {
font-family: ‘Roboto’, sans-serif;
font-size: 15px;
font-weight: 400;
transition: none;
margin: 3px 0 0 15px; /* Adjust vertical margin between categories */
width: auto; /* Adjust the width for all menu items */
display: block; /* Ensure each menu item occupies its own line */
padding: 8px; /* Optional: Add padding for better aesthetics */
}

javascript :

// Get the menu opener and dropdown categories elements
var menuOpener = document.querySelector(‘.wd-header-cats.wd-style-1 .menu-opener’);
var dropdownCats = document.querySelector(‘.wd-dropdown-cats’);

// Function to reset the styles of the menu opener
function resetMenuOpenerStyles() {
menuOpener.style.backgroundColor = ‘#ef7f22’; // Reset background color to default
menuOpener.style.color = ‘#ffffff’; // Reset text color to default
}

// Add event listener to menu opener for hover effect
menuOpener.addEventListener(‘mouseover’, function() {
this.style.backgroundColor = ‘#EAEAEA’; // Change background color on hover
this.style.color = ‘#3b3b3b’; // Change text color on hover
});

// Add event listener to menu opener for mouseout
menuOpener.addEventListener(‘mouseout’, function() {
resetMenuOpenerStyles(); // Reset styles on mouseout
});

// Add event listener to dropdown categories for mouseover
dropdownCats.addEventListener(‘mouseover’, function() {
menuOpener.style.backgroundColor = ‘#EAEAEA’; // Change background color when dropdown is shown
menuOpener.style.color = ‘#3b3b3b’; // Change text color when dropdown is shown
});

// Add event listener to dropdown categories for mouseout
dropdownCats.addEventListener(‘mouseout’, function() {
resetMenuOpenerStyles(); // Reset styles when mouse leaves dropdown area
});

// Get all category links within the dropdown menu
var categoryLinks = document.querySelectorAll(‘.wd-dropdown-cats a’);

// Add event listeners to each category link for hover effect
categoryLinks.forEach(function(categoryLink) {
categoryLink.addEventListener(‘mouseover’, function() {
// Apply 3D effect
this.style.transform = ‘scale(1.1)’; // Increase size
this.style.fontWeight = ‘bold’; // Make text bold
this.style.transition = ‘transform 0.3s, font-weight 0.3s’; // Add transition for smooth effect
});

categoryLink.addEventListener(‘mouseout’, function() {
// Reset styles on mouseout
this.style.transform = ‘scale(1)’; // Reset size
this.style.fontWeight = ‘normal’; // Reset font weight
// Reset other styles if needed
});
});

Hello,

You are Most Welcome.

We are glad that you managed to solve the problem yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts