Hi,
So this is my website’s header.
What I’m trying to achieve is:
- On smaller screens, my navigation-link text disappear and the icons stay visible
- 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;
}
}