Im trying to make my portfolio page suitable for the smaller screens and have placed a media query to do so. But when I change to a smaller screen my navigation icons won't show, all I get is an empty navigation bar. I have purposely removed my logo because it takes up too much space on smaller screens but I'm unsure why my icons are also not showing up.
any advice would be very much appreciated and if you see anything you would improve in my code feel free to let me know, all advice is welcome!
thanks
:root {
font-size: 16px;
font-family: 'Open sans';
}
* {
margin: 0;
padding:0;
font-family: sans-serif;
}
body {
background-color: white;
}
body::-webkit-scrollbar {
width: 0.6rem;
}
body::-webkit-scrollbar-track {
background-color:grey ;
}
body::-webkit-scrollbar-thumb {
background-color: #5A36AF;
}
main{
margin-left: 7rem;
margin-right: 7rem;
padding: 1rem;
}
/****** Navbar ******/
.img-logo {
margin-top: 1rem;
width: 8rem;
transition: width 350ms ease ;
}
.navbar {
position: fixed;
background-color: #5A36AF;
transition: width 350ms ease ;
}
.fa-brands {
transition: width 3s ease;
}
.navbar-nav {
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.nav-item:last-child {
margin-top: auto;;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
}
.nav-link {
display: flex;
align-items: center;
height: 6rem;
text-decoration: none;
color: white;
font-size: 1.2rem;
font-weight: bold;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed) ;
}
.nav-link:hover {
filter: grayscale(0) opacity(1);
background: #6159D1;
color:#EC8355 ;
border-radius: 10%;
}
.link-text {
display: none;
margin: 1rem;
}
.nav-link svg {
min-height: 2rem;
margin: 0 1.5rem;
}
.fa-solid {
color: #20C997
}
.fa-brands {
color:#20C997 ;
}
.fa-brands,
fa-solid {
transition: var(--transition-speed);
}
.navbar:hover .fa-solid {
font-size: 3rem;
}
.navbar:hover .fa-brands {
font-size: 4rem;
}
p {
font-size: 30px;
}
/* smaller screens */
@media only screen and (max-width: 600px) {
.navbar {
bottom: 0;
width: 100vw;
height: 5rem;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
}
.nav-link {
justify-content: center;
}
main {
margin: 0;
}
}
/* larger screens */
@media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 7rem;
height: 100vh;
}
.navbar:hover {
width: 16rem;
}
.navbar:hover .img-logo {
width: 16rem;
}
.navbar:hover .link-text {
display: block;
}
}<body>
<div class="navbar">
<nav>
<ul class="navbar-nav">
<li class="logo">
<img class="img-logo" src="img/Logo.png" alt="My logo">
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-house"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-user"></i>
<span class="link-text">About Me</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-screwdriver-wrench"></i>
<span class="link-text">services</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-folder-open"></i>
<span class="link-text">Projects</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-solid fa-id-card"></i>
<span class="link-text">Contact</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa-brands fa-github"></i>
<span class="link-text"></span>
</a>
</li>
</ul>
</nav>
</div>
</body>
