CODEWITHSUNDEEP
jqueryhtmlcsshref
user979974
user979974

Reputation: 953

CSS Bigger clickable href a area

I would like to have a bigger href clickage area for my menu. At the present time, I just have tiny part of my href which can be clickable. I would like to know how to enlarge this area. I saw some CSS trick by using a class but the problem I have also an active class for this link. Do you know how can I modify my css ? Here my fiddle.

#cssmenu ul {
    margin: 0;
    padding: 0.5px; /*0*/
    font-size: 13pt;/*12pt*//*12px;*/
     background: #94adc1; /*#f2f1f2;*/

    font-family: 'ITCAvantGardeStd-Bk'; /*ajout*/
    border-bottom: 1px solid #f2f1f2;
    zoom: 1;
    text-align:center; 
    height:94px; 
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li {
    float: left;
    margin: 0 auto;
    padding: 0 4px;
    list-style: none;

}

#cssmenu li a {
 display: block;
    float: left;
    color: #123b59; /*#797978;*/
    text-decoration: none;

    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
}


#cssmenu li.active a:before {

    content: ' ';
    width: 0px; 
    height: 10px; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
    position:absolute;
    bottom:20px;

}

#cssmenu {
    width: 100%;
    position: fixed;

}

Upvotes: 1

Views: 117

Answers (1)

SW4
SW4

Reputation: 71150

Its because your #wrap element is overlapping the clickable area, by overlapping your menu.

Change the CSS for #wrap to:

#wrap {
    width: 1300%;
    margin: 0 auto;
    margin-top: 94px; /* <-- offset by height of menu */
    float: left;
}

.panel, #wrap {
    height:100%;
    overflow: hidden;
    position: relative;
   /* <-- removed margin-top from panel content */  
}

Upvotes: 1

Related Questions