unable to trigger custom material design models to a wordpress menu using a div id2019 Community Moderator ElectionCSS customized scroll bar in divSubmit hidden fields in a html formKnockout Html bindingIf not have class change color textAndroid Material Design Button StylesColoring Buttons in Android with Material Design and AppCompatLive preview of text makes the link not change background color when hovered overCannot display HTML stringcontenteditable div placeholder color in Windows high contrast modeRelation between dropdown structure and proccessing it's data in forms

Is it true that good novels will automatically sell themselves on Amazon (and so on) and there is no need for one to waste time promoting?

Is it possible to upcast ritual spells?

Is it normal that my co-workers at a fitness company criticize my food choices?

Is a party consisting of only a bard, a cleric, and a warlock functional long-term?

How do I hide Chekhov's Gun?

Are there other languages, besides English, where the indefinite (or definite) article varies based on sound?

If curse and magic is two sides of the same coin, why the former is forbidden?

Did Ender ever learn that he killed Stilson and/or Bonzo?

Co-worker team leader wants to inject his friend's awful software into our development. What should I say to our common boss?

What options are left, if Britain cannot decide?

Why is the President allowed to veto a cancellation of emergency powers?

How to create the Curved texte?

How Could an Airship Be Repaired Mid-Flight

Look at your watch and tell me what time is it. vs Look at your watch and tell me what time it is

Are all passive ability checks floors for active ability checks?

How to explain that I do not want to visit a country due to personal safety concern?

Does Mathematica reuse previous computations?

How to terminate ping <dest> &

Who is flying the vertibirds?

A Cautionary Suggestion

If I can solve Sudoku can I solve Travelling Salesman Problem(TSP)? If yes, how?

PTIJ: Who should I vote for? (21st Knesset Edition)

Are ETF trackers fundamentally better than individual stocks?

A sequence that has integer values for prime indexes only:



unable to trigger custom material design models to a wordpress menu using a div id



2019 Community Moderator ElectionCSS customized scroll bar in divSubmit hidden fields in a html formKnockout Html bindingIf not have class change color textAndroid Material Design Button StylesColoring Buttons in Android with Material Design and AppCompatLive preview of text makes the link not change background color when hovered overCannot display HTML stringcontenteditable div placeholder color in Windows high contrast modeRelation between dropdown structure and proccessing it's data in forms










0















I am unable to trigger custom material design models to a WordPress menu using a div id. I want to call the login model to the custom login menu of WordPress and register model to the register link. Source code of the models is also given below please check and help me with this issue.
Thanks



This is the link of models i want to call.



This is the link where i want to call






<?php /* Template Name: mdb-register */ ?>

<html lang="en">
<head>
 <title>WatchAwear Login/Registration Form</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
 <!-- Bootstrap core CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
 <!-- JQuery -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
 <style>
 .nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 
 padding: 10px;
 background: #3b3b3b !important;
 
 .nav-link 
 color: #fff !important;
 border:none !important;
 
 .nav-link.active 
 color: #020202 !important;
 
 .nav-link.active:hover 
 background: #fff !important;
 border-color: #fff !important;
 
 .nav-link:hover 
 background: #0006 !important;
 border-color: #232323 !important;
 
 .btn.btn-info 
 background-color: #020202 !important;
 width: 100%;
 
 .btn-outline-info
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 .btn-outline-info:hover 
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 #modalLRForm 
 padding-left: 0 !important;
 background: #fff6;
 
 #modalLRForm1 
 padding-left: 0 !important;
 background: #fff6;
 

 /*=========Mobile Styles STARTS============== */
 /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

 @media only screen and (max-device-width: 480px) 
 .modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer 
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 color: #616161;
 font-size: 13px !important;
 
 
 /*=========Mobile Styles ENDS============== */
 </style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">

 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">

 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
 Register</a>
 </li>
 </ul>
 <div class="modal-body">
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-envelope prefix"></i>
 <input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>

 <div class="md-form form-sm mb-5">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput13"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
 <label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
 </div>

 <!-- Material unchecked -->
 <div class="form-check">
 <input type="checkbox" class="form-check-input" id="materialUnchecked">
 <label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
 </div>
 <div class="text-center form-sm mt-2">
 <button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-left">
 <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 <!-- Tab panels -->
 </div>
 <!--/.Content-->
 </div>
</div>
<div class="text-center">
 <a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>


<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">
 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
 Login</a>
 </li>
 </ul>
 <!-- Form Start -->
 <div class="modal-body mb-1">
 <div class="md-form mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
 <label data-error="wrong" data-success="right" for="form3"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput11"></label>
 </div>
 <div class="text-center mt-2">
 <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-center text-md-right mt-1">
 <p><a href="#" class="blue-text">Forgot Password?</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
 <!--/.Content-->
 </div>
</div>
<!--Modal: Login / Register Form-->

<div class="text-center">
 <a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>








php html css wordpress material-design







share|improve this question



















  • 1





    First of all, welcome to StackOverflow. Following the advices of the community, it is recommended to include source code formatted to better understand your issue and find the proper solution. Please check the documentation on how to create a Minimal, Complete, and Verifiable example

    – Carlos Cavero
    Mar 7 at 15:04











  • Added the source code to the post sir please help me.

    – Chunky Brains
    Mar 8 at 5:13















0















I am unable to trigger custom material design models to a WordPress menu using a div id. I want to call the login model to the custom login menu of WordPress and register model to the register link. Source code of the models is also given below please check and help me with this issue.
Thanks



This is the link of models i want to call.



This is the link where i want to call






<?php /* Template Name: mdb-register */ ?>

<html lang="en">
<head>
 <title>WatchAwear Login/Registration Form</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
 <!-- Bootstrap core CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
 <!-- JQuery -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
 <style>
 .nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 
 padding: 10px;
 background: #3b3b3b !important;
 
 .nav-link 
 color: #fff !important;
 border:none !important;
 
 .nav-link.active 
 color: #020202 !important;
 
 .nav-link.active:hover 
 background: #fff !important;
 border-color: #fff !important;
 
 .nav-link:hover 
 background: #0006 !important;
 border-color: #232323 !important;
 
 .btn.btn-info 
 background-color: #020202 !important;
 width: 100%;
 
 .btn-outline-info
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 .btn-outline-info:hover 
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 #modalLRForm 
 padding-left: 0 !important;
 background: #fff6;
 
 #modalLRForm1 
 padding-left: 0 !important;
 background: #fff6;
 

 /*=========Mobile Styles STARTS============== */
 /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

 @media only screen and (max-device-width: 480px) 
 .modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer 
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 color: #616161;
 font-size: 13px !important;
 
 
 /*=========Mobile Styles ENDS============== */
 </style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">

 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">

 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
 Register</a>
 </li>
 </ul>
 <div class="modal-body">
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-envelope prefix"></i>
 <input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>

 <div class="md-form form-sm mb-5">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput13"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
 <label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
 </div>

 <!-- Material unchecked -->
 <div class="form-check">
 <input type="checkbox" class="form-check-input" id="materialUnchecked">
 <label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
 </div>
 <div class="text-center form-sm mt-2">
 <button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-left">
 <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 <!-- Tab panels -->
 </div>
 <!--/.Content-->
 </div>
</div>
<div class="text-center">
 <a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>


<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">
 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
 Login</a>
 </li>
 </ul>
 <!-- Form Start -->
 <div class="modal-body mb-1">
 <div class="md-form mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
 <label data-error="wrong" data-success="right" for="form3"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput11"></label>
 </div>
 <div class="text-center mt-2">
 <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-center text-md-right mt-1">
 <p><a href="#" class="blue-text">Forgot Password?</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
 <!--/.Content-->
 </div>
</div>
<!--Modal: Login / Register Form-->

<div class="text-center">
 <a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>








php html css wordpress material-design







share|improve this question



















  • 1





    First of all, welcome to StackOverflow. Following the advices of the community, it is recommended to include source code formatted to better understand your issue and find the proper solution. Please check the documentation on how to create a Minimal, Complete, and Verifiable example

    – Carlos Cavero
    Mar 7 at 15:04











  • Added the source code to the post sir please help me.

    – Chunky Brains
    Mar 8 at 5:13













0












0








0








I am unable to trigger custom material design models to a WordPress menu using a div id. I want to call the login model to the custom login menu of WordPress and register model to the register link. Source code of the models is also given below please check and help me with this issue.
Thanks



This is the link of models i want to call.



This is the link where i want to call






<?php /* Template Name: mdb-register */ ?>

<html lang="en">
<head>
 <title>WatchAwear Login/Registration Form</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
 <!-- Bootstrap core CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
 <!-- JQuery -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
 <style>
 .nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 
 padding: 10px;
 background: #3b3b3b !important;
 
 .nav-link 
 color: #fff !important;
 border:none !important;
 
 .nav-link.active 
 color: #020202 !important;
 
 .nav-link.active:hover 
 background: #fff !important;
 border-color: #fff !important;
 
 .nav-link:hover 
 background: #0006 !important;
 border-color: #232323 !important;
 
 .btn.btn-info 
 background-color: #020202 !important;
 width: 100%;
 
 .btn-outline-info
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 .btn-outline-info:hover 
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 #modalLRForm 
 padding-left: 0 !important;
 background: #fff6;
 
 #modalLRForm1 
 padding-left: 0 !important;
 background: #fff6;
 

 /*=========Mobile Styles STARTS============== */
 /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

 @media only screen and (max-device-width: 480px) 
 .modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer 
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 color: #616161;
 font-size: 13px !important;
 
 
 /*=========Mobile Styles ENDS============== */
 </style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">

 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">

 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
 Register</a>
 </li>
 </ul>
 <div class="modal-body">
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-envelope prefix"></i>
 <input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>

 <div class="md-form form-sm mb-5">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput13"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
 <label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
 </div>

 <!-- Material unchecked -->
 <div class="form-check">
 <input type="checkbox" class="form-check-input" id="materialUnchecked">
 <label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
 </div>
 <div class="text-center form-sm mt-2">
 <button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-left">
 <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 <!-- Tab panels -->
 </div>
 <!--/.Content-->
 </div>
</div>
<div class="text-center">
 <a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>


<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">
 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
 Login</a>
 </li>
 </ul>
 <!-- Form Start -->
 <div class="modal-body mb-1">
 <div class="md-form mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
 <label data-error="wrong" data-success="right" for="form3"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput11"></label>
 </div>
 <div class="text-center mt-2">
 <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-center text-md-right mt-1">
 <p><a href="#" class="blue-text">Forgot Password?</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
 <!--/.Content-->
 </div>
</div>
<!--Modal: Login / Register Form-->

<div class="text-center">
 <a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>








php html css wordpress material-design







share|improve this question
















I am unable to trigger custom material design models to a WordPress menu using a div id. I want to call the login model to the custom login menu of WordPress and register model to the register link. Source code of the models is also given below please check and help me with this issue.
Thanks



This is the link of models i want to call.



This is the link where i want to call






<?php /* Template Name: mdb-register */ ?>

<html lang="en">
<head>
 <title>WatchAwear Login/Registration Form</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
 <!-- Bootstrap core CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
 <!-- JQuery -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
 <style>
 .nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 
 padding: 10px;
 background: #3b3b3b !important;
 
 .nav-link 
 color: #fff !important;
 border:none !important;
 
 .nav-link.active 
 color: #020202 !important;
 
 .nav-link.active:hover 
 background: #fff !important;
 border-color: #fff !important;
 
 .nav-link:hover 
 background: #0006 !important;
 border-color: #232323 !important;
 
 .btn.btn-info 
 background-color: #020202 !important;
 width: 100%;
 
 .btn-outline-info
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 .btn-outline-info:hover 
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 #modalLRForm 
 padding-left: 0 !important;
 background: #fff6;
 
 #modalLRForm1 
 padding-left: 0 !important;
 background: #fff6;
 

 /*=========Mobile Styles STARTS============== */
 /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

 @media only screen and (max-device-width: 480px) 
 .modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer 
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 color: #616161;
 font-size: 13px !important;
 
 
 /*=========Mobile Styles ENDS============== */
 </style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">

 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">

 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
 Register</a>
 </li>
 </ul>
 <div class="modal-body">
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-envelope prefix"></i>
 <input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>

 <div class="md-form form-sm mb-5">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput13"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
 <label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
 </div>

 <!-- Material unchecked -->
 <div class="form-check">
 <input type="checkbox" class="form-check-input" id="materialUnchecked">
 <label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
 </div>
 <div class="text-center form-sm mt-2">
 <button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-left">
 <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 <!-- Tab panels -->
 </div>
 <!--/.Content-->
 </div>
</div>
<div class="text-center">
 <a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>


<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">
 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
 Login</a>
 </li>
 </ul>
 <!-- Form Start -->
 <div class="modal-body mb-1">
 <div class="md-form mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
 <label data-error="wrong" data-success="right" for="form3"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput11"></label>
 </div>
 <div class="text-center mt-2">
 <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-center text-md-right mt-1">
 <p><a href="#" class="blue-text">Forgot Password?</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
 <!--/.Content-->
 </div>
</div>
<!--Modal: Login / Register Form-->

<div class="text-center">
 <a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>








<?php /* Template Name: mdb-register */ ?>

<html lang="en">
<head>
 <title>WatchAwear Login/Registration Form</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
 <!-- Bootstrap core CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
 <!-- JQuery -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
 <style>
 .nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 
 padding: 10px;
 background: #3b3b3b !important;
 
 .nav-link 
 color: #fff !important;
 border:none !important;
 
 .nav-link.active 
 color: #020202 !important;
 
 .nav-link.active:hover 
 background: #fff !important;
 border-color: #fff !important;
 
 .nav-link:hover 
 background: #0006 !important;
 border-color: #232323 !important;
 
 .btn.btn-info 
 background-color: #020202 !important;
 width: 100%;
 
 .btn-outline-info
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 .btn-outline-info:hover 
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 #modalLRForm 
 padding-left: 0 !important;
 background: #fff6;
 
 #modalLRForm1 
 padding-left: 0 !important;
 background: #fff6;
 

 /*=========Mobile Styles STARTS============== */
 /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

 @media only screen and (max-device-width: 480px) 
 .modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer 
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 color: #616161;
 font-size: 13px !important;
 
 
 /*=========Mobile Styles ENDS============== */
 </style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">

 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">

 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
 Register</a>
 </li>
 </ul>
 <div class="modal-body">
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-envelope prefix"></i>
 <input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>

 <div class="md-form form-sm mb-5">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput13"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
 <label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
 </div>

 <!-- Material unchecked -->
 <div class="form-check">
 <input type="checkbox" class="form-check-input" id="materialUnchecked">
 <label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
 </div>
 <div class="text-center form-sm mt-2">
 <button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-left">
 <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 <!-- Tab panels -->
 </div>
 <!--/.Content-->
 </div>
</div>
<div class="text-center">
 <a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>


<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">
 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
 Login</a>
 </li>
 </ul>
 <!-- Form Start -->
 <div class="modal-body mb-1">
 <div class="md-form mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
 <label data-error="wrong" data-success="right" for="form3"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput11"></label>
 </div>
 <div class="text-center mt-2">
 <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-center text-md-right mt-1">
 <p><a href="#" class="blue-text">Forgot Password?</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
 <!--/.Content-->
 </div>
</div>
<!--Modal: Login / Register Form-->

<div class="text-center">
 <a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>





<?php /* Template Name: mdb-register */ ?>

<html lang="en">
<head>
 <title>WatchAwear Login/Registration Form</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
 <!-- Bootstrap core CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
 <!-- JQuery -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
 <style>
 .nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 
 padding: 10px;
 background: #3b3b3b !important;
 
 .nav-link 
 color: #fff !important;
 border:none !important;
 
 .nav-link.active 
 color: #020202 !important;
 
 .nav-link.active:hover 
 background: #fff !important;
 border-color: #fff !important;
 
 .nav-link:hover 
 background: #0006 !important;
 border-color: #232323 !important;
 
 .btn.btn-info 
 background-color: #020202 !important;
 width: 100%;
 
 .btn-outline-info
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 .btn-outline-info:hover 
 border-color: #020202 !important;
 background-color: transparent !important;
 color: #020202 !important;
 
 #modalLRForm 
 padding-left: 0 !important;
 background: #fff6;
 
 #modalLRForm1 
 padding-left: 0 !important;
 background: #fff6;
 

 /*=========Mobile Styles STARTS============== */
 /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

 @media only screen and (max-device-width: 480px) 
 .modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer 
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 color: #616161;
 font-size: 13px !important;
 
 
 /*=========Mobile Styles ENDS============== */
 </style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">

 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">

 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
 Register</a>
 </li>
 </ul>
 <div class="modal-body">
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>
 <div class="md-form form-sm mb-5">
 <i class="fas fa-envelope prefix"></i>
 <input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
 <label data-error="wrong" data-success="right" for="modalLRInput12"></label>
 </div>

 <div class="md-form form-sm mb-5">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput13"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
 <label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
 </div>

 <!-- Material unchecked -->
 <div class="form-check">
 <input type="checkbox" class="form-check-input" id="materialUnchecked">
 <label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
 </div>
 <div class="text-center form-sm mt-2">
 <button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-left">
 <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 <!-- Tab panels -->
 </div>
 <!--/.Content-->
 </div>
</div>
<div class="text-center">
 <a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>


<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Modal cascading tabs-->
 <div class="modal-c-tabs">
 <!-- Nav tabs -->
 <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
 <li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
 Login</a>
 </li>
 </ul>
 <!-- Form Start -->
 <div class="modal-body mb-1">
 <div class="md-form mb-5">
 <i class="fas fa-user prefix grey-text"></i>
 <input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
 <label data-error="wrong" data-success="right" for="form3"></label>
 </div>

 <div class="md-form form-sm mb-4">
 <i class="fas fa-lock prefix"></i>
 <input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
 <label data-error="wrong" data-success="right" for="modalLRInput11"></label>
 </div>
 <div class="text-center mt-2">
 <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
 </div>
 </div>
 <!--Footer-->
 <div class="modal-footer">
 <div class="options text-center text-md-right mt-1">
 <p><a href="#" class="blue-text">Forgot Password?</a></p>
 </div>
 <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
 <!--/.Content-->
 </div>
</div>
<!--Modal: Login / Register Form-->

<div class="text-center">
 <a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>





php html css wordpress material-design




php html css wordpress material-design






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 8 at 5:11







Chunky Brains

















asked Mar 7 at 13:56









Chunky BrainsChunky Brains

43




43







  • 1





    First of all, welcome to StackOverflow. Following the advices of the community, it is recommended to include source code formatted to better understand your issue and find the proper solution. Please check the documentation on how to create a Minimal, Complete, and Verifiable example

    – Carlos Cavero
    Mar 7 at 15:04











  • Added the source code to the post sir please help me.

    – Chunky Brains
    Mar 8 at 5:13












  • 1





    First of all, welcome to StackOverflow. Following the advices of the community, it is recommended to include source code formatted to better understand your issue and find the proper solution. Please check the documentation on how to create a Minimal, Complete, and Verifiable example

    – Carlos Cavero
    Mar 7 at 15:04











  • Added the source code to the post sir please help me.

    – Chunky Brains
    Mar 8 at 5:13







1




1





First of all, welcome to StackOverflow. Following the advices of the community, it is recommended to include source code formatted to better understand your issue and find the proper solution. Please check the documentation on how to create a Minimal, Complete, and Verifiable example

– Carlos Cavero
Mar 7 at 15:04





First of all, welcome to StackOverflow. Following the advices of the community, it is recommended to include source code formatted to better understand your issue and find the proper solution. Please check the documentation on how to create a Minimal, Complete, and Verifiable example

– Carlos Cavero
Mar 7 at 15:04













Added the source code to the post sir please help me.

– Chunky Brains
Mar 8 at 5:13





Added the source code to the post sir please help me.

– Chunky Brains
Mar 8 at 5:13












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55045504%2funable-to-trigger-custom-material-design-models-to-a-wordpress-menu-using-a-div%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55045504%2funable-to-trigger-custom-material-design-models-to-a-wordpress-menu-using-a-div%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

Image
"One can do his homework in the library" Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits? Potential difference and current flow It's a yearly task, alright Co-worker team leader wants to inject the crap software product of his friends into our development. What should I say to our common boss? Touchscreen-controlled dentist office snowman collector game What to do when during a meeting client people start to fight (even physically) with each others? What options are left, if Britain cannot decide? How could our ancestors have domesticated a solitary predator? Professor being mistaken for a grad student When two POV characters meet Replacing Windows 7 security updates with anti-virus? What has been your most complicated TikZ drawing? Can the word "advantage" be used as an adjective? How could a female member of a species produce eggs unto death? Can the druid cantrip Thorn
Read more

Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

Image
How to make healing in an exploration game interesting What's the meaning of “spike” in the context of “adrenaline spike”? Welcoming 2019 Pi day: How to draw the letter π? Do I need life insurance if I can cover my own funeral costs? What do Xenomorphs eat in the Alien series? Python if-else code style for reduced code for rounding floats My adviser wants to be the first author Do I need to get involved in office politics to get ahead? Why one should not leave fingerprints on bulbs and plugs? How to change two letters closest to a string and one letter immediately after a string using notepad++ Why doesn't the EU now just force the UK to choose between referendum and no-deal? How to deal with taxi scam when on vacation? Recruiter wants very extensive technical details about all of my previous work What is the least resource intensive way to generate the luatex font cache for a new font? How Could an Airship Be Repaired Mid-Flight Why did it take so
Read more

2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

Image
Sheikh Khazal (1924)Unrest (1925)Unrest (1928)Unrest (1940)1943 revolt1945 revoltInsurgency (1956-70)Insurgency (1979)Embassy siege (1980)Unrest (2005)2005–06 Ahvaz bombingsDay of Rage (2011)Uprising of Dignity (2018) Arab rebellionsProtests in Iran2005 riotsPolitical riots2005 in IranAhvazKhuzestan conflictHuman rights in IranAhwazi Arabs Iranian ArabsAhvazKhuzestanbombingsPersian GulfKhuzestanShadeganHoveyzehSusangerdMahshahrKhorramshahrAbadanAhvazConstitution of IranPersianofficial languageconstitution of the Islamic RepublicconstitutionIranian ArabsAmnesty InternationalConstitution of the Islamic Republic of IranMohammad-Ali AbtahiMohammad KhatamiAmnesty InternationalAli ShamkhaniAhvazIranian ArabsprotestAhvazNobel Peace PrizeShirin Ebadi 2005 Ahvaz unrest Part of Arab separatism in Khuzestan Iranian Khuzestan province Date 15–18 April 2005 Methods demonstrations, riots Status Unrest quelled Parties to the civil conflict Iranian Arabs Iranian Government Lead figures Ali Khamen
Read more