If you’re using Elementor and your menu is not responsive, you can use custom CSS code to make it responsive. Here’s an example of how you can achieve this:
@media (max-width: 768px) {
.elementor-nav-menu {
display: none;
}
.elementor-nav-menu--mobile {
display: block;
}
}
This CSS code targets screens with a maximum width of 768 pixels. It hides the regular menu and displays the mobile menu instead. You can adjust the max-width value to fit your specific needs.
To add this CSS code to your WordPress site, you can use the “Additional CSS” feature provided by WordPress. Here’s how you can do it:
- Log in to your WordPress admin dashboard.
- Go to “Appearance” and click on “Customize”.
- In the customizer, click on “Additional CSS”.
- Paste the CSS code snippet provided above into the text area.
- Click on “Publish” to save your changes.
Once you’ve added the CSS code, your Elementor menu should become responsive on screens with a width of 768 pixels or less. The regular menu will be hidden, and the mobile menu will be displayed instead.
Examples
Example 1: Custom CSS to Make Elementor Menu Responsive
This example demonstrates how to use custom CSS to make an Elementor menu responsive. By adding media queries and adjusting the styling, you can ensure that the menu adapts to different screen sizes.
@media (max-width: 768px) {
.elementor-nav-menu {
display: none;
}
.elementor-menu-toggle {
display: block;
}
.elementor-menu-toggle .elementor-menu-toggle-bar {
background-color: #000;
}
.elementor-menu-toggle .elementor-menu-toggle-bar:before,
.elementor-menu-toggle .elementor-menu-toggle-bar:after {
background-color: #000;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar {
background-color: #000;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
background-color: #000;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before {
transform: translateY(6px) rotate(45deg);
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
transform: translateY(-6px) rotate(-45deg);
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
background-color: #000;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before {
transform: translateY(6px) rotate(45deg);
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
transform: translateY(-6px) rotate(-45deg);
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
background-color: #000;
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before {
transform: translateY(6px) rotate(45deg);
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
transform: translateY(-6px) rotate(-45deg);
}
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:before,
.elementor-menu-toggle.elementor-active .elementor-menu-toggle-bar:after {
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
}
This CSS code targets the Elementor menu and adds responsive behavior. It hides the menu items and displays a toggle button with three horizontal bars. When the toggle button is clicked, it transforms into an “X” shape. The CSS uses media queries to apply these styles only when the screen width is less than or equal to 768 pixels.
Example 2: Custom JavaScript to Make Elementor Menu Responsive
This example demonstrates how to use custom JavaScript to make an Elementor menu responsive. By adding event listeners and manipulating the DOM, you can create a responsive menu that adapts to different screen sizes.
(function($) {
$(document).ready(function() {
var menuToggle = $('.elementor-menu-toggle');
var menuItems = $('.elementor-nav-menu');
menuToggle.on('click', function() {
menuItems.slideToggle();
});
$(window).on('resize', function() {
if ($(window).width() > 768) {
menuItems.show();
} else {
menuItems.hide();
}
});
});
})(jQuery);
This JavaScript code adds functionality to the Elementor menu. It toggles the visibility of the menu items when the toggle button is clicked. Additionally, it ensures that the menu items are shown when the screen width is greater than 768 pixels and hidden when it is less than or equal to 768 pixels.
Example 3: Using Elementor Pro’s Responsive Menu Widget
This example demonstrates how to use Elementor Pro’s Responsive Menu widget to create a responsive menu. The widget provides a visual interface to customize the appearance and behavior of the menu for different screen sizes.
To use the Responsive Menu widget, follow these steps:
- Add a new section to your Elementor page.
- Drag and drop the Responsive Menu widget onto the section.
- Configure the widget settings, such as the menu style, alignment, and breakpoints.
- Customize the menu items and their appearance using the widget’s options.
- Preview and publish your page to see the responsive menu in action.
Elementor Pro’s Responsive Menu widget simplifies the process of creating a responsive menu by providing a user-friendly interface. It allows you to customize the menu’s appearance and behavior for different screen sizes without writing custom code.