How to make whole <li> clickable as a link - html

Question

I have navigation menu that contains links,
what I want to achieve is to make the whole li element clickable as a link.
so how to achieve that please?
I'm using bootstrap 3.2 library.
below is the HTML and CSS code.
User wants to able to click on the Link from anywhere inside the li html element
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
border-right: 1px solid #01154D;
padding: 10px 24px;
}
#navbarSupportedContent .nav-item:hover {
background-color: #DBDDFD;
color: #000 !important;
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>

Answer 1

Remove li padding and add width 100% and padding to a tag
li.nav-item > a, li.nav-item > .dropdown show a{
display: block;
width: 100%;
}
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
li.nav-item a{ padding: 10px 0px;}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
border-right: 1px solid #01154D;
padding: 0px 24px;
}
#navbarSupportedContent .nav-item:hover {
background-color: #DBDDFD;
color: #000 !important;
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>

Answer 2

Do not render the <li> big, but the <a>. The anchor element already has all the bindings necessary to provide an accessible and very usable link. Rendering it bigger improves usability.
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
}
#navbarSupportedContent .nav-link {
display: block;
border-right: 1px solid #01154D;
padding: 10px 24px;
}
#navbarSupportedContent .nav-link:hover {
background-color: #DBDDFD;
color: #000 !important;
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav>
</div>
</div>
</div>

Answer 3

So a simple CSS only solution would be;
Remove the padding from li element.
Make the a tag a block and give it 100% width
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
border-right: 1px solid #01154D;
padding: 0;
}
#navbarSupportedContent .nav-item:hover {
background-color: #DBDDFD;
color: #000 !important;
}
#navbarSupportedContent .nav-item a {
display: block;
width: 100%;
padding: 10px 24px; // removed from list and added here for same visual effect
}
<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>

Answer 4

Simple Solution, Just throw list (li) between the anchor tags (a)
<ul class="navbar-nav mr-auto" style="float:inherit;">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<li class="nav-item active">
<span id="submenu1">Home</span>
</li>
</a>
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<li class="nav-item ">
<span id="submenu1">Employee Tools</span>
</li>
</a>
</ul>