WordPress responsive menu without plugin

New Page

How to Create a Mobile-Ready Responsive WordPress Menu

Last Updated OnOctober 3, 2016by Editorial Team | Reader Disclosure Disclosure : Our content is endorsed by the reader. This means that if you click on some of our links, we may earn a commission. See how WPBeginner is funded, why it’s important, and how you can support us.

Share 197 Tweet Fee Fee Facebook Messenger WhatsApp Email

Do you want to create a responsive and mobile-ready WordPress menu? Mobile users have already surpassed desktop users on many websites. Adding a mobile responsive menu makes it easier for users to navigate your website. Dans cet article, we will show you how to easily create a mobile-ready responsive WordPress menu.

Create a Mobile-Responsive WordPress Menu Create a mobile-friendly WordPress menu

C’est un tutoriel en profondeur. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users.

At the end of this tutorial, you will learn how to create a slide-out mobile menu, drop-down mobile menu, and mobile toggle menu.

Clever ? Let us begin.

Video tutorial

Subscribe to WPBeginner

If no video interests you or if you need more instructions, continue leyendo.

Method 1 – Add a Responsive Menu in WordPress Using a Plugin

This method is simpler and recommended for principals, there is no need for custom coding.

In this method, we will create a hamburger menu that slides on the mobile screen.

Demonstration of the received menu add-on Responsive menu plugin demo

The first thing you need to do is install and activate the Responsive Menu plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item titled “Responsive Menu” to your WordPress admin bar. Clicking on it will take you to the plugin settings page.

Sensitive menu configurations Responsive menu settings

Vous devez d’abord entrer la largeur de l’écran à partir de laquelle le plugin commencera à afficher le menu réactif. La valeur par défaut est 800px, ce qui devrait fonctionner pour la plupart des sites Web.

After that, you need to select the menu you would like to use for your responsive menu. If you haven’t created a menu yet, then you can create one by visiting Appearance » Menus. See our guide on how to add navigation menu in WordPress for detailed instructions.

Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens.

Don’t forget to click on the ‘Update Options’ button to store your settings.

You can now visit your website and resize your browser screen to see the responsive menu in action.

Demonstration of the received menu add-on Responsive menu plugin demo

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

Method 2: Add a Drop Down Select Menu Using a Plugin

Another way to add a responsive menu is by adding a drop down select menu. This method does not require any coding skills, so it is recommended for beginners.

Responsive selection menu Responsive selection menu

First thing you need to do is install and activate the Responsive Select Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Responsive Select to configure plugin settings.

Menu Setup Selection Select menu settings

You need to scroll down to ‘Activate theme locations’ section. By default, the plugin is activated on all theme locations. You can change that by selectively turning it on for specific theme locations.

Don’t forget to click on the save all settings button to store your changes.

You can now visit your website and resize browser screen to see responsive select menu in action.

Method 3: Creating Mobile Friendly Responsive Menu with Toggle Effect

One of the most common used method to display a menu on mobile screens is by using the toggle effect.

This method requires you to add custom code to your WordPress files. If you haven’t done this before, then take a look at our guide on pasting snippets from web in WordPress.

First you need to open a text editor like notepad and paste this code.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

( function () {

     var nav = document.getElementById( ‘site-navigation’ ), button, menu;

     if ( ! nav ) {

         return ;

     }

 

     button = nav.getElementsByTagName( ‘button’ )[0];

     menu   = nav.getElementsByTagName( ‘ul’ )[0];

     if ( ! button ) {

         return ;

     }

 

     // Hide button if menu is missing or empty.

     if ( ! menu || ! menu.childNodes.length ) {

         button.style.display = ‘none’ ;

         return ;

     }

 

     button.onclick = function () {

         if ( -1 === menu.className.indexOf( ‘nav-menu’ ) ) {

             menu.className = ‘nav-menu’ ;

         }

 

         if ( -1 !== button.className.indexOf( ‘toggled-on’ ) ) {

             button.className = button.className.replace( ‘ toggled-on’ , ” );

             menu.className = menu.className.replace( ‘ toggled-on’ , ” );

         } else {

             button.className += ‘ toggled-on’ ;

             menu.className += ‘ toggled-on’ ;

         }

     };

} )(jQuery);

Now you need to save this file as navigation.js on your desktop.

Next, you need to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

Replace your-theme-directory with your current theme’s directory. If your theme directory does not have a js folder, then you need to create it.

After uploading the JavaScript file, the next step is to make sure your WordPress site loads this JavaScript. You will need to add the following code to your theme’s functions.php file.

1

wp_enqueue_script( ‘wpb_togglemenu’ , get_template_directory_uri() . ‘https://cdn3.wpbeginner.com/js/navigation.js’ , array ( ‘jquery’ ), ‘20160909’ , true );

Now we need to add the navigation menu into our WordPress theme. Usually navigation menu is added into a theme’s header.php file.

1

2

3

4

<nav id= “site-navigation” class = “main-navigation” role= “navigation” >

             <button class = “menu-toggle” >Menu</button>

             <?php wp_nav_menu( array ( ‘theme_location’ => ‘primary’ , ‘menu_class’ => ‘nav-menu’ ) ); ?>

</nav>

We are assuming that the theme location defined by your theme is called primary. If it is not, then use the theme location defined by your WordPress theme.

The final step is to add CSS so that our menu uses the right CSS classes for toggle to work when viewed on mobile devices.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

/* Navigation Menu */

.main-navigation {

     margin-top : 24px ;

     margin-top : 1.714285714 rem;

     text-align : center ;

}

.main-navigation li {

     margin-top : 24px ;

     margin-top : 1.714285714 rem;

     font-size : 12px ;

     font-size : 0.857142857 rem;

     line-height : 1.42857143 ;

}

.main-navigation a {

     color : #5e5e5e ;

}

.main-navigation a:hover,

.main-navigation a:focus {

     color : #21759b ;

}

.main-navigation ul.nav-menu,

.main-navigation div.nav-menu > ul {

     display : none ;

}

 

.main-navigation ul.nav-menu.toggled-on,

.menu-toggle {

     display : inline-block ;

}

 

// CSS to use on mobile devices

 

@media screen and ( min-width : 600px ) {

 

.main-navigation ul.nav-menu,

     .main-navigation div.nav-menu > ul {

         border-bottom : 1px solid #ededed ;

         border-top : 1px solid #ededed ;

         display : inline-block !important ;

         text-align : left ;

         width : 100% ;

     }

     .main-navigation ul {

         margin : 0 ;

         text-indent : 0 ;

     }

     .main-navigation li a,

     .main-navigation li {

         display : inline-block ;

         text-decoration : none ;

     }

     .main-navigation li a {

         border-bottom : 0 ;

         color : #6a6a6a ;

         line-height : 3.692307692 ;

         text-transform : uppercase ;

         white-space : nowrap ;

     }

     .main-navigation li a:hover,

     .main-navigation li a:focus {

         color : #000 ;

     }

     .main-navigation li {

         margin : 0 40px 0 0 ;

         margin : 0 2.857142857 rem 0 0 ;

         position : relative ;

     }

     .main-navigation li ul {

         margin : 0 ;

         padding : 0 ;

         position : absolute ;

         top : 100% ;

         z-index : 1 ;

         height : 1px ;

         width : 1px ;

         overflow : hidden ;

         clip : rect( 1px , 1px , 1px , 1px );

     }

     .main-navigation li ul ul {

         top : 0 ;

         left : 100% ;

     }

     .main-navigation ul li:hover > ul,

     .main-navigation ul li:focus > ul,

     .main-navigation .focus > ul {

         border-left : 0 ;

         clip : inherit ;

         overflow : inherit ;

         height : inherit ;

         width : inherit ;

     }

     .main-navigation li ul li a {

         background : #efefef ;

         border-bottom : 1px solid #ededed ;

         display : block ;

         font-size : 11px ;

         font-size : 0.785714286 rem;

         line-height : 2.181818182 ;

         padding : 8px 10px ;

         padding : 0.571428571 rem 0.714285714 rem;

         width : 180px ;

         width : 12.85714286 rem;

         white-space : normal ;

     }

     .main-navigation li ul li a:hover,

     .main-navigation li ul li a:focus {

         background : #e3e3e3 ;

         color : #444 ;

     }

     .main-navigation .current-menu-item > a,

     .main-navigation .current-menu-ancestor > a,

     .main-navigation .current_page_item > a,

     .main-navigation .current_page_ancestor > a {

         color : #636363 ;

         font-weight : bold ;

     }

     .menu-toggle {

         display : none ;

     }

     

     }

You can now visit your website and resize your browser screen to see your responsive toggle menu in action.

Another overview of the menu Toggle menu preview

Troubleshooting: Depending on your WordPress theme you may need to adjust the CSS. Use inspect element tool to figure out the CSS conflicts with your theme.

Method 4: Add a Slide-In Mobile Menu in WordPress

Another common technique to add a mobile menu is by using a slide-in panel menu (as shown in Method 1).

Method 4 requires you to add code to your WordPress theme files, and it is just a different way of accomplishing the same results as Method 1.

First, you need to open a plain text editor like Notepad and add the following code to a blank text file.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

( function ($) {

$( ‘#toggle’ ).toggle(

     function () {

         $( ‘#popout’ ).animate({ left: 0 }, ‘slow’ , function () {

             $( ‘#toggle’ ).html( ‘<img src=”http://www.example.com/wp-content/themes/your-theme/images/menu.png” alt=”close” />’ );

         });

     },

     function () {

         $( ‘#popout’ ).animate({ left: -250 }, ‘slow’ , function () {

             $( ‘#toggle’ ).html( ‘<img src=”http://www.example.com/wp-content/themes/your-theme/images/menu.png” alt=”close” />’ );

         });

     }

);

})(jQuery);

Don’t forget to replace example.com with your own domain name and your-theme with your actual theme directory. Save this file as slidepanel.js to your desktop.

Now you will need an image which will be used as a menu icon. A hamburger icon is most commonly used as the menu icon. You will find tons of such images from different websites. We will be using the menu icon from Google Material Icons library.

Once you find an image that you want to use, save it as menu.png.

Next, you need to open a FTP client client and upload slidepanel.js file to /wp-content/your-theme/js/ folder.

If your theme directory does not have the JS folder, then you need to create tit and then upload your file.

After that, you need to upload menu.png file to /wp-content/themes/your-theme/images/ folder.

Once the files are uploaded, we need to make sure that your theme loads the JavaScript file you just added. We will achieve this by enqueuing the JavaScript file.

Add this code to your theme’s functions.php file.

1

wp_enqueue_script( ‘wpb_slidepanel’ , get_template_directory_uri() . ‘https://cdn2.wpbeginner.com/js/slidepanel.js’ , array ( ‘jquery’ ), ‘20160909’ , true );

Now we need to add the actual code in your theme’s header.php file to display the navigation menu. You should look for code similar to this:

1

<?php wp_nav_menu( array ( ‘theme_location’ => ‘primary’ , ‘menu_class’ => ‘nav-menu’ ) ); ?>

You want to wrap existing navigation menu with the HTML code to display your slide panel menu on smaller screens.

1

2

3

4

5

<div id= “toggle” >

<img src= “http://www.example.com/wp-content/themes/your-theme/images/menu.png” alt= “Afficher” /></div>

<div id= “popout” >

<?php wp_nav_menu( array ( ‘theme_location’ => ‘primary’ , ‘menu_class’ => ‘nav-menu’ ) ); ?>

</div>

Note that your theme’s navigation menu is still there. We just wrapped it around the HTML we need to trigger the slidepanel menu.

The last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon.

Here’s a sample CSS you can use as a starting point:

1

2

3

4

5

6

sept

8

9

dix

11

12

13

14

15

sixteen

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

Écran @media et ( min-width : 769px ) {

#toggle {

display: none;

}

 

}

 

Ecran @media et ( max-width : 768px ) {

#popout {

fixed station ;

height: 100%;

width: 250px;

background: rgb(25, 25, 25);

fond : rgba ( 25 , 25 , 25 , . 9 );

White color ;

skin : 0px ;

left: -250px;

overflow: auto;

}

 

 

#toggle {

Float right;

fixed station ;

skin : 60px ;

right: 45px;

width: 28px;

height: 24px;

 

}

 

.nav-menu li {

border-bottom : 1px solid #eee ;

padding: 20px;

width: 100%;

}

 

.nav-menu li:hover {

fond : #CCC ;

}

 

.nav-menu li a {

color: #FFF;

text-decoration: none;

width: 100%;

}

}

Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

This is what it looked like on our demo website:

Responsive menu available on WordPress Responsive Sliding Menu in WordPress

Hope this article was designed to create a responsive WordPress menu for mobile devices. It is also possible to see nuestra guía sobre how to aggregate a menú receptivo de pantalla completa in WordPress

If you like this article, submit to a new YouTube channel for WordPress video tutorials. Also puede encontrarnos on Twitter and Facebook .

Share 197 Tweet Fee Fee Facebook Messenger WhatsApp Email

Google Google translator

Google Google Translate

Google Traduction


Video WordPress responsive menu without plugin

Related Posts

Automatically update wordpress plugins

Contents1 WordPress® Automatic Updates – Should You Use Them?1.1 The Benefits of WordPress Automatic Updates1.2 The problem with WordPress automatic updates1.3 What if the automatic update breaks…

WordPress mortgage calculator plugin

Contents1 Etiqueta del complemento: hypothetical calculator1.1 Calculadora de hipoteca receptiva1.2 mortgage calculator1.3 Calculadora de hipotecas / Calculadora de préstamos1.4 WordPress Estatik Mortgage Calculator1.5 Simple Mortgage Calculator1.6 WP…

WordPress google search plugin

Contents1 How to Add Google Search to a WordPress Site1.1 Step 1 – Download a Google search plugin1.2 Step 2: Manage your Google search settings1.3 Step 3:…

Gravity forms wordpress plugin

Contents1 Etiqueta del complemento: formas de gravedad1.1 Armadura WP – anti-spam honeypot1.2 Spam-Free Gravity Forms1.3 Seguimiento de events para formularios de gravedad1.4 Severity Shapes + Custom Post…

WordPress plugin fundraising thermometer

Contents1 donation termometer1.1 ¿Cómo uso los valores dinámicos?1.2 The [therm_r] and [therm_t] shortcodes show different values to the thermometers.1.3 Can I display the thermometer as a percentage…

Calculator plugin for wordpress

New Page Top 12 Calculator Plugins for Your WordPress Site Last updated August 7, 2020 by Editorial Team | Reader Disclosure Disclosure : Our content is reader…