How to Use Custom Toggle Mega Menu in WordPress without Using Plugin?

Want create site? Find Free WordPress Themes and plugins.

Gone are the days where you couldn’t find the Toggle Mega Menu in Bootstrap or the Toggle Mega Menu Plugin for that matter.

Now you can finally create a custom Toggle Mega Menu in WordPress without using a plugin.

Here’s how you go about it.

Using bootstrap I created a mega menu and integrated that same code in WordPress without using a plugin. Bonus: It’s more responsive.

Use bootstrap file structure. For this code bootstrap file structure is important.

Then add the below HTML code.

 Note: Here, if you want to add a 3 column mega menu use col-md-4 class; and for 4 column mega menu use col-md-3 class.

         <header>

            <button class=”hamburger”>&#9776;</button>

            <button class=”cross”>&#735;</button>

            </header>

            <div class=”menu”>

                <div class=”col-md-4 col-xs-12″>

                             <ul class=”cust-nav”>

                                            <li><a href=””>Home</a></li>

                                            <li><a href=””>About</a></li>

                                            <li><a href=””>Services</a></li>

                                            <li><a href=””>Portfolio</a></li>

                                            <li><a href=””>Contact</a></li>

                             </ul>

                    </div>

                <div class=”col-md-4 col-xs-12″>

                             <ul class=”cust-nav”>

                                            <li><a href=””>Home1</a></li>

                                            <li><a href=””>About1</a></li>

                                            <li><a href=””>Services1</a></li>

                                            <li><a href=””>Portfolio1</a></li>

                                            <li><a href=””>Contact1</a></li>

                             </ul>

                  </div>

                     <div class=”col-md-4 col-xs-12″>

                             <ul class=”cust-nav”>

                                            <li><a href=””>Home2</a></li>

                                            <li><a href=””>About2</a></li>

                                            <li><a href=””>Services2</a></li>

                                            <li><a href=””>Portfolio2</a></li>

                                            <li><a href=””>Contact2</a></li>

                         </ul>

                        </div>

                 </div>

     <main>

           <h1 style=”margin:20px auto; text-align:center; color:#fff;”>Basic Responsive Sliding Toggle Menu Demo</h1>

    </main>

Then add the css code

 Note: This is not the actual CSS but you can modify it as per the requirement. ( UI- Design)

            body {

            font-family: ‘Roboto Condensed’, sans-serif;

            margin: 0;

            background: #46CFB0;

            }          

            header {

            width: 100%;

            background: #16A085;

            height: 50px;

            line-height: 50px;

            }

            .hamburger {

            background: none;

            position: absolute;

            top: 0;

            right: 0;

            line-height: 45px;

            padding: 0px 10px 0px 10px;

            color: #fff;

            border: 0;

            font-size: 1.4em;

            font-weight: bold;

            cursor: pointer;

            outline: none;

            z-index: 10000000000000;

            }

            .cross {

            background: #46CFB0;

            position: absolute;

            top: 0px;

            right: 0;

            padding: 0px 10px 0px 10px;

            color: #fff;

            border: 0;

            height: 50px;

            font-size: 3em;

            line-height: 65px;

            font-weight: bold;

            cursor: pointer;

            outline: none;

            z-index: 10000000000000;

            }

            .menu {

            z-index: 1000000;

            font-weight: bold;

            font-size: 0.8em;

            width: 100%;

            background: #34BC9D;

            position: absolute;

            text-align: center;

            }

            .menu ul {

            margin: 0;

            padding: 0;

            list-style-type: none;

            list-style-image: none;

            }

            .menu li {

            display: block;

            padding: 15px 0 15px 0;

            border-bottom: #1c7317 1px solid;

            }

            .menu li:hover {

            display: block;

            background: white;

            color: #135e0f;

            padding: 15px 0 15px 0;

            }

            .menu ul li a {

            text-decoration: none;

            margin: 0px;

            color: #fff;

            }

            .menu ul li a:hover {

            color: #fff;

            text-decoration: none;

            }

            .menu a {

            text-decoration: none;

            color: white;

            }

            .menu a:hover {

            text-decoration: none;

            color: white;

            }

            .glyphicon-home {

            color: white;

            font-size: 1.5em;

            margin-top: 5px;

            margin: 0 auto;

            }

Add script.

            <script>

            $( “.cross” ).hide();

            $( “.menu” ).hide();

            $( “.hamburger” ).click(function() {

            $( “.menu” ).slideToggle( “slow”, function() {

            $( “.hamburger” ).hide();

            $( “.cross” ).show();

            });

            });

            $( “.cross” ).click(function() {

            $( “.menu” ).slideToggle( “slow”, function() {

            $( “.cross” ).hide();

            $( “.hamburger” ).show();

            });

            });

            </script>

In WordPress, add html code in header.php and css file.

To make a dynamic menu add the following code in functions.php

Note: For 3 column mega menu, I have created 3 custom menu in WordPress. You can also add 4.

/* Custom mega menu */

//Register Navigations

function register_my_menus() {

 register_nav_menus(

array(

  ‘left-side-menu’ => __( ‘Left Side Menu’ ),

  ‘center-align-menu’ => __( ‘Center Align Menu’ ),

              ‘right-side-menu’ => __( ‘Right Side Menu’ )

)

 );

}

add_action( ‘init’, ‘register_my_menus’ );

Then edit the header.php file as given below.

            <div class=”menu”>

            <div class=”col-md-4 col-xs-12″>

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

                </div>

            <div class=”col-md-4 col-xs-12″>

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

                </div>

            <div class=”col-md-4 col-xs-12″>

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

                </div>

            </div>

Then login to WordPress

  1.       Create all pages.
  2.       Appearance-> Menus-> Create new menu
  3.       Add the pages in the menu. Then scroll down the page and select the exact menu options for this. Refer the image below. 

    Worpress Plugin

Did you find apk for android? You can find new Free Android Games and apps.

Tags

Related Posts

Leave A Comment