Help with Navigation link icons on header while resizing screen

Hi,
So this is my website’s header. Screenshot%20from%202019-06-15%2002-39-27

What I’m trying to achieve is:

  1. On smaller screens, my navigation-link text disappear and the icons stay visible
  2. On larger screens, my navigation- link text stays visible and the icons are invisible.
    I tried a few things and can’t seem to figure it out.

Here’s part of my code:
HTML

<header> 
    <div id="header-div">
    <img src="https://vector.jpg" id="header-img"> <h1 id="brand-title">Shake-it-Off</h1>
     <div id="rightheader">
      <nav id="nav-bar">
      <ul>
        <li><a href="#highlights" id="hl" class="nav-link">Highlights <i class="material-icons">
home</i></a></li>
        <li><a href="#about" id="abt" class="nav-link">About<i class="material-icons">
location_city</i></a></li>
        <li><a href="#promotions" id="md" class="nav-link">Promotions<i class="material-icons">
whatshot</i></a></li>
      </ul>
    </nav> 
    </div>
    </div>
  </header>

CSS

.material-icons{
    display:none;
  }
@media(max-width:512px){
header .nav-link{
    display:none;
  }
  
.nav-link + .material-icons{
  display:block;
  }
}

https://codepen.io/stacy005/pen/qwyvoB

One option would be to wrap the link text in a span and hide it.

<nav id="nav-bar">
  <ul>
    <li>
      <a href="#highlights" id="hl" class="nav-link">
        <span>Highlights</span>
        <i class="material-icons">home</i>
      </a>
    </li>
    <li>
      <a href="#about" id="abt" class="nav-link">
        <span>About</span>
        <i class="material-icons">location_city</i>
      </a>
    </li>
    <li>
      <a href="#promotions" id="md" class="nav-link">
        <span>Promotions</span>
        <i class="material-icons">whatshot</i>
      </a>
    </li>
  </ul>
</nav>
@media (max-width: 512px) {
  header .nav-link > span {
    display:none;
  }
}
1 Like