Elementor’s WordPress Menu widget allows you to create flexible and stylish navigation menus. By combining this widget with custom CSS and JavaScript, you can turn a standard menu into an interactive, smooth-scrolling horizontal menu. In this article, we’ll show you how to set up the WordPress Menu widget as a horizontal scrolling menu using custom JavaScript and CSS for smooth transitions.
Step 1: Setting Up the WordPress Menu in Elementor
First, add the WordPress Menu Widget to your Elementor page where you’d like to display your horizontal scrolling menu.
- Drag the WordPress Menu Widget from the Elementor panel into your desired section.
- In the widget settings, choose the navigation menu you want to use (or create a new one in the WordPress dashboard).
- Apply the CSS class
selector ulto the menu in the Advanced tab under CSS Classes.
Step 2: Horizontal Scrolling Menu CSS
Now that you’ve added the WordPress Menu widget, it’s time to style it to behave as a horizontally scrolling menu. Apply the following CSS in Custom CSS under Elementor’s Advanced tab or through your theme’s customizer:
/* Scrollable <ul> Menu */
selector ul {
display: flex;
flex-wrap: nowrap; /* Prevent wrapping of menu items */
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none; /* Hide scrollbar for Firefox */
}
/* Custom scrollbar styles for Chrome, Safari */
selector ul::-webkit-scrollbar {
width: 8px; /* Width of the vertical scrollbar */
height: 8px; /* Height of the horizontal scrollbar */
}
/* Scrollbar track */
selector ul::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1); /* Track color */
}
/* Scrollbar thumb */
selector ul::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5); /* Thumb color */
border-radius: 10px; /* Rounded corners */
}
/* Ensure list items don't wrap */
selector ul li {
flex-shrink: 0;
margin-right: 10px; /* Spacing between items */
}
This CSS will ensure that:
- The
selectorcontainer is scrollable horizontally. - Menu items are displayed in a horizontal row (
flexlayout). - Each menu item has spacing and background styling.
Step 3: Adding Scroll Buttons Using Elementor Button Widgets
To control the scrolling, use two Elementor Button Widgets as scroll buttons. Set their CSS classes to:
- Left Button:
left - Right Button:
right
You can find these settings under the Advanced tab in the button widget settings by adding left or right to the CSS Classes field.
Step 4: JavaScript for Smooth Scrolling
Now, let’s add JavaScript to handle smooth scrolling when the buttons are clicked. Use the Code Snippets plugin or Elementor’s Custom Code feature to add this JavaScript:
<script>
document.addEventListener("DOMContentLoaded", function () {
const scrollImages = document.querySelector(".selector ul");
const scrollLength = scrollImages.scrollWidth - scrollImages.clientWidth;
const leftButton = document.querySelector(".left");
const rightButton = document.querySelector(".right");
function checkScroll() {
const currentScroll = scrollImages.scrollLeft;
if (currentScroll === 0) {
leftButton.setAttribute("disabled", "true");
rightButton.removeAttribute("disabled");
} else if (currentScroll === scrollLength) {
rightButton.setAttribute("disabled", "true");
leftButton.removeAttribute("disabled");
} else {
leftButton.removeAttribute("disabled");
rightButton.removeAttribute("disabled");
}
}
scrollImages.addEventListener("scroll", checkScroll);
window.addEventListener("resize", checkScroll);
checkScroll();
function leftScroll() {
scrollImages.scrollBy({
left: -200,
behavior: "smooth"
});
}
function rightScroll() {
scrollImages.scrollBy({
left: 200,
behavior: "smooth"
});
}
leftButton.addEventListener("click", leftScroll);
rightButton.addEventListener("click", rightScroll);
}); </script>
This script enables the smooth horizontal scrolling effect, triggered by the left and right buttons.
Step 5: Attaching Screenshots with Alt Text
To help readers follow the steps clearly, you should consider attaching screenshots at key points in your tutorial. Below are suggestions on where to include them and their corresponding alt text:
Menu Widget Setup: A screenshot showing how to add the WordPress Menu widget in Elementor.
- Alt Text: “Adding the WordPress Menu widget in Elementor to create a horizontal scrollable menu.”
Button Widget Setup: A screenshot demonstrating where to apply the
leftandrightCSS classes to the Elementor buttons.- Alt Text: “Assigning left and right scroll buttons for the horizontal menu in Elementor.”
Final Menu Preview: A screenshot of the completed horizontal scrolling menu with working scroll buttons.
- Alt Text: “Preview of the horizontal scrolling menu with scrollable buttons in Elementor.”
Menu text style (optional)
to
li.menu-item {
border: solid;
border-width: 1px;
border-radius: 30px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-right: 10px;
border-color: #cac9d4;
background-color: #f3f2f85c;
}
li.menu-item:hover {
border-color: #836fff;
background-color: #f0eff6;
}
Conclusion
By combining Elementor’s WordPress Menu widget, custom CSS, and JavaScript, you can create a modern, smooth-scrolling horizontal menu that adds interactivity and elegance to your website. The use of Elementor’s button widgets for scrolling allows easy navigation through menu items, perfect for menus with many links. Make sure to test the functionality across different screen sizes to ensure a fully responsive experience.