CODEWITHSUNDEEP
htmlcssclick
Aldridge1991
Aldridge1991

Reputation: 1367

HTML Icon not clickable

I'm developing a website and I want to use an icon from google fonts. I can see it on the screen but when I click over it nothing happens.

<div class="darker">
<img class="background" src="~/Content/Images/Portada.jpg" alt="Smiley face" height="150" width="150">
<i class="material-icons" id="menu-toggle">menu</i>
</div>

<div id="page-content-wrapper">    
    <div class="container">
        <div class="flex-center">
            <div class="animated fadeInUp">
                    <img class="img-responsive centering" id="title" src="~/Content/Images/PizzeriaBritannia.png" />
            </div>

            <div class="animated flipInX text-center">
                    <h3>Desde 1986 contigo y con los tuyos</h3>
            </div>
        </div>
    </div>
</div>

And this is the function i want to call.

     $('#menu-toggle').click(function () {
    e.preventDefault();
   $("#wrapper").toggleClass("active");
});

Full CSS divided in two files:

Sidebar:

.row{
margin-left:0px;
margin-right:0px;
}

#wrapper {
padding-left: 0px;
transition: all .4s ease 0s;
height: 100%;
}

#sidebar-wrapper {
margin-left: 0;
left: 0;
width: 250px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
opacity: 0.8;

}

.sidebar-nav {
display: block;
float: left;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}

#page-content-wrapper {
padding-left: 0;
margin-left: 0;
width: 100%;
height: auto;
}

#wrapper.active {
padding-left: 0px;
}

#wrapper.active #sidebar-wrapper {
left: -250px;
}

#page-content-wrapper {
width: 100%;
}

#sidebar_menu li a, .sidebar-nav li a {
color: #ffffff;
display: block;
float: left;
text-decoration: none;
width: 250px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}

.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}

.sidebar-nav li {
line-height: 40px;
text-align: center;
}

.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}

.sidebar-nav li a:hover {
 color: #fff;
 background: rgba(255,255,255,0.2);
 text-decoration: none;
 }

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
 text-decoration: none;
 }

.sidebar-nav > .sidebar-brand {
 height: 65px;
 line-height: 60px;
 font-size: 18px;
 }

 .sidebar-nav > .sidebar-brand a {
 color: #999999;
 }

 .sidebar-nav > .sidebar-brand a:hover {
 color: #fff;
 background: none;
 }

I know the jquery is working fine as I've tested with a button. I think the problem might be that the fullscreen image is overlapping the icon (but it's visible though). Any idea about this?

Upvotes: 1

Views: 2110

Answers (3)

Rachel Gallen
Rachel Gallen

Reputation: 28563

I moved your menutoggle call into the img itself as opposed to being in the and added a class active{display:none;} to your css. Works now it seems.

http://jsfiddle.net/yae20m78/

Upvotes: 1

Aldridge1991
Aldridge1991

Reputation: 1367

I found that absolute position in div fields was causing the issues.

Upvotes: 0

Evolis
Evolis

Reputation: 135

I can't find the #wrapper in your html you're calling in

    $('#menu-toggle').click(function () {
    e.preventDefault();
   $("#wrapper").toggleClass("active");
});

Maybe you're calling it on the wrong id? -> page-content-wrapper looks like the right one if i'm not mistaken

Upvotes: 1

Related Questions