CODEWITHSUNDEEP
htmlcssmenunavigation
user2504339
user2504339

Reputation: 35

My website buttons are not fully clickable

This is my HTML I am trying to make my buttons fully clickable but I think its not working. Links are enable only on button text. I have tried everything but couldn't find a solution for this.

HTML

<nav id="nav">
    <ul>
        <li>
            <span class="nav-icon icon-home"></span>
            <a href="index.html">Home</a>
        </li>
        <li class="current-menu-item">
            <span class="nav-icon icon-user"></span>
            <a href="about.html">About Us</a>            
        </li>
    </ul>
</nav>

CSS

#nav-container{
    float: left;
    width:  100%;
    z-index: 900;
    position: relative; 
    height: 65px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #fafafa 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fafafa)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#fafafa 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#fafafa 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#fafafa 100%); /* W3C */
}

#nav-container select{
    display: none;
}

#nav-container .grid_12{
    margin-bottom: 0;
}

#nav{
    height: 100%;
    width: 730px;
    margin-right: 20px;
    list-style: none;
    float: left;
}

.nav-icon{
    color: #444;
    font-size: 14px;
    margin-bottom: 3px;
    text-align: center;
    display: block !important;
    width: 100%;
}

#nav > ul{
    display: block !important;
}

#nav li{
    float: left;
    position: relative;
    cursor: pointer;

}

#nav > ul > li{
    padding: 15px 20px;
    height: 65px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    border-right: 1px solid #e8e8e8;
}

#nav > ul > li:first-child{
    border-left: 1px solid #e8e8e8;
}

#nav li a{
    float: left;
    font: 12px 'Open Sans', Arial, sans-serif;
    color: #333;
}

#nav > ul > li.current-menu-item a, 
#nav > ul > li.current-menu-item span,
#nav > ul > li:hover span, 
#nav > ul > li:hover a{
    color: #fff;
}
#nav > ul > li a:hover{
    color: #fff !important;
}

#nav > ul > li.current-menu-item, 
#nav > ul > li:hover, {
    background-color: #d52b2a !important;
}

Upvotes: 1

Views: 1182

Answers (3)

Siddharth Nagar
Siddharth Nagar

Reputation: 412

Use

display:inline-block;
padding: 15px 20px;

in your #nav li a

and yo can also remove height from #nav > ul > li and give it to the a tag.

Upvotes: 0

Abdul Malik
Abdul Malik

Reputation: 2642

add this property to your css class 

#nav li a{display:block;}

Upvotes: 2

MassivePenguin
MassivePenguin

Reputation: 3711

Best guess (without seeing code) is that your links (a tags) are inside your list items (li tags). The clickable part of the navigation (the a tags) should have the padding applied (and might also benefit from having display: block applied to them). That way, the 'dead space' around the text will also be clickable.

Upvotes: 1

Related Questions