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
asked Mar 7 at 13:56
Chunky BrainsChunky Brains
43
add a comment |
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
asked Mar 7 at 13:56
Chunky BrainsChunky Brains
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
add a comment |
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
asked Mar 7 at 13:56
Chunky BrainsChunky Brains
43
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
asked Mar 7 at 13:56
Chunky BrainsChunky Brains
43
asked Mar 7 at 13:56
Chunky BrainsChunky Brains
43
edited Mar 8 at 5:11
Chunky Brains
asked Mar 7 at 13:56
Chunky BrainsChunky Brains
43
asked Mar 7 at 13:56
Chunky BrainsChunky Brains
43
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
add a comment |
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
add a comment |
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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