Do you want to add a flex responsive menu to WordPress Theme? If yes, go through this entire article to learn two easy methods to add a flex responsive menu to your theme in the simplest way. the easiest way possible.
If you are familiar with coding then you can proceed forward with the first method. If not so, or if you’re just a beginner we suggest you use the Responsive Menu WordPress plugin to add a flex responsive menu to WordPress Theme.
What is a Flex Menu?
Flexbox is a CSS layout mode that enables users to align the elements in the most responsive way easily. It allows different flexible layouts but only in a single dimension. Flexbox’s order, alignment, and sizing properties enable the users to build navigation bars that adapt with layouts of the viewport size. Also, it is a relatively new layout module that is created with users’ flexibility in mind.
The best part about creating and using a flex menu is that it modifies the height and width automatically to fill the space on different screen sizes, which makes your menu look visually appealing. It even interacts with major web browsers and loads systematically.
In this tutorial, we will teach you the step-by-step guide to adding a flex responsive menu to WordPress Theme. But, you might have confusion regarding ‘Why should I use Responsive Menu Plugin?’ We will try to answer your question in the best way possible, for that reason let’s know about this plugin in detail.
Responsive Menu
Responsive Menu is one of the best WordPress Plugins to create mobile-friendly menus without much hassle. As this plugin is highly customizable you can create a menu as per your own requirements that meet and fits the need of your website in the best way possible. This plugin enables you to convert your current theme menu into a mobile-ready, fully W3C compliant responsive design in seconds.
Users can add menus to tables in the most appropriate and functional way using this plugin. You will get 150 customizable options along with a combination of 22,500 options! Even if you are a beginner there is nothing much to worry about as this plugin doesn’t need any kind of coding skill. Just use an easy-to-use interface and make your menu look exactly as you want with minimum fuss.
Method 1: Create Flex Menu With Code
Method 2: Add Flex Responsive Using Responsive Menu
Method 1: Create Flex Menu With Code
If you are not a WordPress Beginner and familiar with the coding, we would suggest using the code. Make sure to use the code made available by codepen.io on your WordPress website that is mentioned below:
HTML
<nav>
<ul class="menu">
<li class="logo"><a href="#">Creative Mind Agency</a></li>
<li class="item"><a href="#">Home</a></li>
<li class="item"><a href="#">About</a></li>
<li class="item has-submenu">
<a tabindex="0">Services</a>
<ul class="submenu">
<li class="subitem"><a href="#">Design</a></li>
<li class="subitem"><a href="#">Development</a></li>
<li class="subitem"><a href="#">SEO</a></li>
<li class="subitem"><a href="#">Copywriting</a></li>
</ul>
</li>
<li class="item has-submenu">
<a tabindex="0">Plans</a>
<ul class="submenu">
<li class="subitem"><a href="#">Freelancer</a></li>
<li class="subitem"><a href="#">Startup</a></li>
<li class="subitem"><a href="#">Enterprise</a></li>
</ul>
</li>
<li class="item"><a href="#">Blog</a></li>
<li class="item"><a href="#">Contact</a>
</li>
<li class="item button"><a href="#">Log In</a></li>
<li class="item button secondary"><a href="#">Sign Up</a></li>
<li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>CSS
/* Basic styling */
{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
font-size: 16px;
}
nav {
background: #222;
padding: 0 15px;
}
a {
color: white;
text-decoration: none;
}
.menu,
.submenu {
list-style-type: none;
}
.logo {
font-size: 20px;
padding: 7.5px 10px 7.5px 0;
}
.item {
padding: 10px;
}
.item.button {
padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
color: #ccc;
}
/* Mobile menu / .menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .menu li a { display: block; padding: 15px 5px; } .menu li.subitem a { padding: 15px; } .toggle { order: 1; font-size: 20px; } .item.button { order: 2; } .item { order: 3; width: 100%; text-align: center; display: none; } .active .item { display: block; } .button.secondary { / divider between buttons and menu links / border-bottom: 1px #444 solid; } / Submenu up from mobile screens */
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu i {
font-size: 12px;
}
.has-submenu > a::after {
font-family: "Font Awesome 5 Free";
font-size: 12px;
line-height: 16px;
font-weight: 900;
content: "\f078";
color: white;
padding-left: 5px;
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
background-color: #111;
border-radius: 3px;
}
/* Tablet menu / @media all and (min-width: 700px) { .menu { justify-content: center; } .logo { flex: 1; } .item.button { width: auto; order: 1; display: block; } .toggle { flex: 1; text-align: right; order: 2; } / Button up from tablet screen / .menu li.button a { padding: 10px 15px; margin: 5px 0; } .button a { background: #0080ff; border: 1px royalblue solid; } .button.secondary { border: 0; } .button.secondary a { background: transparent; border: 1px #0080ff solid; } .button a:hover { text-decoration: none; } .button:not(.secondary) a:hover { background: royalblue; border-color: darkblue; } } / Desktop menu */
@media all and (min-width: 960px) {
.menu {
align-items: flex-start;
flex-wrap: nowrap;
background: none;
}
.logo {
order: 0;
}
.item {
order: 1;
position: relative;
display: block;
width: auto;
}
.button {
order: 2;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: #111;
}
.toggle {
display: none;
}
.submenu-active {
border-radius: 0;
}
} JavaScript
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
const items = document.querySelectorAll(".item");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
} else {
this.classList.add("submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (menu.querySelector(".submenu-active")) {
let isClickInside = menu
.querySelector(".submenu-active")
.contains(e.target);
if (!isClickInside && menu.querySelector(".submenu-active")) { menu.querySelector(".submenu-active").classList.remove("submenu-active"); }
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
if (item.querySelector(".submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false); Method 2: Add Flex Responsive Using Responsive Menu
If you are a WordPress Beginner, we suggest you use the Responsive Menu plugin to add Flex Responsive Menu instead of using the code.
Flexbox Menus are comparatively new front-end features that enable you to build a website layout in a much easier way than before. Also, these kinds of menus are much more responsive.
In order to make your WordPress Theme more complete and powerful, make sure to go through this step-by-step guide to add a flex responsive menu.
Step 1: Install and Activate the Responsive Menu Plugin
Make sure that you have Installed and Activated the Responsive Menu plugin in order to add flex Responsive Menu to the WordPress theme. If you haven’t installed the plugin, make sure to install it!
Get Responsive Menu Plugin for yourself on the WordPress Repository or Official website. You can even download the plugin directly from the site Dashboard.
If you are a WordPress Beginner and you don’t know the right way to install the plugin, go through our article ‘How to Install New WordPress Plugin’
After installing the plugin make sure to Activate it.
Once you Activate the plugin, the Responsive Menu option will appear on the left sidebar of the page.
Step 2: Add a Full-Width Theme to the Responsive Menu
We suggest the users upload the Full-Width theme in their Responsive Menu to get the flexbox design menu. In order to do so, make sure to follow the steps mentioned below:
- Go to Responsive Menu>>Theme option at the left sidebar of the page.
- In order to install the theme make sure to click on the Upload theme button at the top of the page.
- Now, click on the select files option.
- You can see the Full Width Theme option once you have installed the theme on your screen.
Step 3: Add Flex Responsive Menu to WordPress Theme
- Go to Responsive Menu>>Menus option at the left sidebar of the page.
- Then click on the Create New Menu option.
- Make sure to Select the Full Width Theme that you have imported previously.
- Then click on the Next button.
- First of all, Name your Menu.
- Then Link WordPress Menu in order to map with your existing WordPress menu.
- Similarly, make changes in the Hide Theme Menu, Device Visibility, and Display Condition as per your own requirement.
- However, you need to note that the Device Visibility option is premium, and the Display Condition option is Semi-Pro. So, you need to get Responsive Menu Pro to use these features.
- Finally, after making all the changes click on Create Menu option.
- Now, your final menu will look as shown in the screenshot below.
Note: The Header will be displayed as shown in the above screenshot only if you use the Responsive Menu Pro.
Wrapping Up:
This is the end of our tutorial guide on ‘How to Add Flex Responsive Menu to WordPress Theme’ You can use the Responsive Menu WordPress Plugin to add comparatively new front-end features that enable you to build a fully adaptable menu that perfectly fits the website layout.
Also, you can get the Responsive Menu Pro for more advanced features:
If you have any confusion while following this step-by-step guide of any of the two methods make sure to let us know about it in the comments section below. We would be happy to help you throughout. Also, do let us know what you think about the Responsive Menu Plugin.
Also, Check-Out: