Adrian Adrian - 1 year ago 80
jQuery Question

Button not working when sidenav is out

I'm working on a login page on my site button for some reason the submit button isn't clickable when the sidenav is out (I'm using the materialize framework).

I have modified my sidenav a bit so that the overlay is removed when it is out and it doesn't close when clicked outside it.


<nav class="top-nav">
<div class="container">
<a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
<div class="navbar-wrapper">
<a href="/index.html" class="brand-logo center">Icy Fire</a>
<ul id="slide-out" class="side-nav">
<h4 class="title-text center-align">Navigation</h4>
<div class="divider"></div>
<li><a href="/user/account.php" class="waves-effect waves-teal bold">Account</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<a class="collapsible-header waves-effect waves-teal bold">Pages<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
<a href="/index.html" class="active waves-effect light">Index</a>

<div class="container">
<div class="row">
<div class="col s12">
<h2 class="indigo-text">Login</h2>
<div class="divider"></div>

<form class="col s12" action="login.php" method="POST">
<div class="input-field">
<input id="username" type="text" class="validate" name="username" required>
<label for="username">Username</label>
<div class="input-field">
<input id="password" type="password" class="validate" name="password" required>
<label for="password">Password</label>
<div class="input-field">
<input type="checkbox" id="indeterminate-checkbox" name="remember" value="on" />
<label for="indeterminate-checkbox">Remember me</label>

<button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit
<i class="material-icons right">send</i>

<h5 class="indigo-text"><?php getMsg(); ?></h5>


html,body {
height: 100%;

header, main, footer, header{
padding-left: 0 auto;

@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;

.rotate90 {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);

.text1 {
color: #212121;

.text2 {
color: #757575;
} {
background-color: #303F9F;

.title-text {
font-family: Roboto;
font-weight: bold;

a.bold, .bold {
font-family: Roboto;
font-weight: bold;

a.light, .light {
font-family: Roboto;
font-weight: normal;

#sidenav-overlay {
display: none;


menuWidth: 260,
edge: 'left',
closeOnClick: true

//Unbind sidenav click to close


Here it is on my website: link

Answer Source

You have a <div class="drag-target"> that's revealed along with the menu. This is overlaying your entire form. You can see for yourself by right clicking over top of the submit button and clicking Inspect Element in the dropdown menu.

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download