Button Click

Hi I have a nav that only click and works when clicked straight in the
middle. How can I make the whole button clickable no matter what area
the user selects. This the HTML: and I know its probably an error to put
the anchor tag first.

 <li id="button"><a href="#photosinuse"><i class="fa fa-home"></i><span class="glyphicon glyphicon-picture" aria-hidden="true"></span>&nbsp;Photos In Use</a></li>

Can we see the CSS?

/* Fixed Nav Side (Product Pages) */

#fxd-nav.stickyhead #navbar{
	position: fixed;
	top: 0;
}

#fxd-nav{
    position: absolute;
    top: 210px;
    left: 995px;
}

ul#main-menu {
    cursor: pointer;
    font-family: "Open Sans";
    font-weight: bold;
    list-style: outside none none;
}

ul#main-menu > ul {
	list-style: none;
	opacity: 0;
}

ul#main-menu li {
	background: #223e7c;
	padding: 15px 30px 15px 15px;
	border-bottom: 1px solid #fff;
    text-align: center;
}

ul#main-menu li:hover {
	background: #da272f;
}

ul#main-menu li a {
	color: #fff;
	text-decoration: none;
}

ul#main-menu i {
	padding-right: 15px;
	padding-left: 5px;
}

/* Submenu */

#submenu {
	color: #fff;
	position: absolute;
	width: 120px;
	left: 202px;
	margin-top: -50px;
}

ul#submenu > li {
	padding: 10px;
}

ul#main-menu ul#submenu.show-submenu {
	opacity: 1;
	cursor: pointer;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

ul#main-menu ul#submenu.hide-submenu {
	cursor: pointer;
	display: none;
}

/*-----------------------------------------------------------------------*/

Move the padding from the list item to the anchor and set the anchor to display:block;

ul#main-menu li {
    background: #223e7c none repeat scroll 0 0;
    border-bottom: 1px solid #fff;
    padding: 15px 30px 15px 15px;   /* DELETE Me */
    text-align: center;
}
ul#main-menu li a {
    display: block;      /* ADD Me */
    padding: 15px 30px 15px 15px;  /* ADD Me */
    text-decoration: none;
    color: #fff;
}

See how this works.

1 Like

that works. just curious but why doesnt it make the whole button
clickable?

It does. I don’t see it on your page, yet.

Oh no I mean like in General why doesnt it do it for the
whole li when the anchor tag is in the li.

The anchor is the clickable container, not the list item. Padding in the list item is not part of the clickable area. Applying a :hover color to the list item instead of the anchor is deceptive, isn’t it. It’s better to apply the hover color to the anchor.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.