How to Make the Whole Area of a List Item in My Navigation Bar, Clickable as a Link

How do I make the whole area of a list item in my navigation bar, clickable as a link?

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

Make entire element a clickable area in navigation bar

Method #1

Remove the borders around nav:

nav {   
    background: rgba(10,10,10,0.9);
    /* border: 5px solid rgba(150,175,200,0.4); <---- REMOVE */
    max-width: 700px;
    margin: 0 auto;
}

I'm assuming when you say "complete block" and "entire flex item" you mean hover over everything. But if you still want the border, just ignore the step above.

Method #2

Add display: block to a elements:

nav > ul > li > a {
    padding: 10px;
    display: block; /* NEW */
}

An anchor element will, by default, extend only the length of its content. By making it a block element it will extend the full width of its container.

html {  font-size: 16px;}
* {  box-sizing: border-box;}
a {  text-decoration: none;  font-size: 1.5em;  display: inline-block;  color: rgb(250, 250, 250);}
nav {  background: rgba(10, 10, 10, 0.9);  /* border : 5px solid rgba(150,175,200,0.4); */  max-width: 700px;  margin: 0 auto;}
nav>ul {  padding: 0;  margin: 0;  display: flex;}
nav>ul>li {  list-style: none;  flex: 1;}
nav>ul>li>a {  padding: 10px;  display: block;}
nav>ul>li :hover {  background: rgb(240, 100, 100);}

<nav>  <ul>    <li><a href="#">Home</a></li>    <li><a href="#">About</a></li>    <li><a href="#">Contact</a></li>    <li><a href="#">Popular Posts</a></li>  </ul></nav>

How to make entire list item clickable?

This is possible, and you can keep your current look. What you need to do is remove margins and padding from the UL and LI tags. Then add left padding to the tags equal to the desired margin. Optionally, in your CSS, set the A tag's display to block so that the entire row, to make the white space to the right of the link clickable as well.

Here is a quick block of CSS that might do what you need:

ul, li {
  margin: 0;
  padding: 0;
}
li {
  list-style:none;
}
a {
  display:block;
  padding-left: 3rem;
}

Make entire li clickable with a element inside without javascript

You need to add display:block to your <a> tags, then you can set a width and height or padding [on the <a>], if you want to make the clickable region bigger.

how to make a whole row in a table clickable as a link?

Author's note I:

Please look at other answers below, especially ones that do not use jquery.

Author's note II:

Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)

Original Answer

You are using Bootstrap which means you are using jQuery :^), so one way to do it is:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery and how to write handlers;

Advantage of using a class over id is that you can apply the solution to multiple rows:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

and your code base doesn't change. The same handler would take care of all the rows.

Another option

You can use Bootstrap jQuery callbacks like this (in a document.ready callback):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

This has the advantage of not being reset upon table sorting (which happens with the other option).

Note

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead.

Make link clickable, but also have the dropdown?

Your current code structure simplified:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  Gruppen <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

As I understood - the aim is to make <i class="fas fa-users"></i> a separate dropdown link and the style should not degrade.

This will solve your issue:

<li class="nav-item dropdown nav-link">
  <a href="/#yourlink">
  Gruppen 
  </a>
  <a class="dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

The trick is in the nav-link class, which makes the propper positioning of your menu element. Moving it to the <li> element may have caused some conflicts in styles if the CSS was more complex, so be careful with moving class from one element to another in future.

Note: you must understand that the dropdown menu should not be made the way you want them now, because interacting with it the average user expects a dropdown after the click, not the redirect to some external page.

Enable list item to clickable area in jQuery Mobile

One simple way is to do this:

$('li.roundabout-moveable-item').click(function(e) {
    e.preventDefault();
    $(this).find('a').click();
    return false;
});

It will make sure that clicking anywhere in the <li> yields the same result as clicking the contained <a>.