Replace two list blocks with one on screen resize

Question

I have a navbar which starts off vertical, but on screen resize will become horizontal.

My vertical navbar has five links, but on screen resize I want 3 of those five links to show and another which will be a drop down menu showing more links (so four links in total when screen is resized).

I have tried to hide the two links which I do not want to see when the screen is resized by doing

@media screen and (max-width: 540px) {
    .hide{
        display: none;
    }
}

But this doesn't hide the actual li - just the text. You'll still be able to see the li when their hover properties are executed (see fiddle for demo).

How can I:

1. Completely remove the two li blocks I don't want when screen is resized.
2. Replace that with a new link called "menu" which will then hold those removed links?

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  padding: 0px;
}

.nav ul li {
  margin-left: 5px;
  list-style-type: none;
  height: 25px;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #333;
  text-decoration: none;
  margin-left: 15px;
}

.nav li:hover a {
  color: #f4f3f3;
}


/* QUERIES */

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .hide {
    display: none;
  }
  .nav ul li {}
}

<div class="nav-container">
  <div class="logo-holder">
    <img class="user-select-none" src="test.jpeg" width="150px" height="150px" alt="temp" />
  </div>
  <div id="navigation-div">
    <nav class="nav">
      <ul class="nav-ul">
        <a class="nav-link active" href="">
          <li>Test 1</li>
        </a>
        <a class="nav-link " href="">
          <li>Test 2</li>
        </a>
        <a class="nav-link" href="">
          <li>Test 3</li>
        </a>
        <a class="nav-link" href="">
          <li class="hide">Test 4</li>
        </a>
        <a class="nav-link" href="">
          <li class="hide">Test 5</li>
        </a>
      </ul>
    </nav>
  </div>
</div>

JSFiddle: https://jsfiddle.net/t2L4dd6u/

Answer 1

The reason for the problem is that you are applying display: none to the <li> tags. However, you are applying the hover to the <a> tag.

Like delinear and Tom said I would put the <a> tag inside the <li> tag. Then apply your hover affect to the <li> tag. In your media query set display: none for the <li> tag.

<li class="hide"><a class="nav-link" href="">Test 5</a></li>

.hide:hover {
  background-color: #333;
  color: #f4f3f3;
}

You also define color: #f4f3f3; in two places for the same thing. Only one should be necessary.

Edit: In order to make sure the <a> tag takes up all the space in the <li> tag check out this answer: Why anchor tag does not take height and width of its containing element I'm not sure if it will be a problem in this scenario though.

Answer 2

Check out the code below.

$( document ).ready(function() {
   $( ".show" ).click(function() {
    $(".subMenu").toggleClass("active");
    return false; 
   });
 });

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
    display: none;
  }
  
.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  padding: 0px;
}

.nav ul li {
  margin-left: 5px;
  list-style-type: none;
  height: 25px;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #333;
  text-decoration: none;
  margin-left: 15px;
}

.nav li:hover a {
  
}


/* QUERIES */

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .hide {
    display: none;
  }
  .show {
    display: inline-block !important;
  }
  .nav ul li {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
<div class="nav-container">
  <div class="logo-holder">
    <img class="user-select-none" src="test.jpeg" width="150px" height="150px" alt="temp" />
  </div>
  <div id="navigation-div">
    <nav class="nav">
      <ul class="nav-ul">        
        <li>
          <a class="nav-link active" href="">Test 1</a>
        </li>
        <li>
          <a class="nav-link" href="">Test 2</a>
        </li>
        <li>
          <a class="nav-link" href="">Test 3</a>
        </li>
        <li class="hide">
          <a class="nav-link" href="">Test 4</a>
        </li>
        <li class="hide">
          <a class="nav-link" href="">Test 5</a>
        </li>
        
        <li class="show">
          <a class="nav-link" href="">Menu</a>
          
          <ul class="subMenu">
            <li>
              <a class="nav-link" href="">Test 4</a>
            </li>
            
            <li>
              <a class="nav-link" href="">Test 5</a>
            </li>
          </ul>

        </li>
        
      </ul>
    </nav>
  </div>
</div>