Nav bar items wont show in small screen format-CodePudding

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

<body>
 <div >
   <nav>
     <ul >

       <li >
    <img  src="img/Logo.png" alt="My logo">
    </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >Home</span>
        </a>
        </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >About Me</span>
        </a>
            
      </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >services</span>
        </a>
        
      </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >Projects</span>
        </a>

        </li>

      <li >
        <a href="#" >
          <i ></i>
          <span >Contact</span>
        </a>

        </li>

        <li >
        <a href="#" >
          <i ></i>
          <span ></span>
          </a>

        </li>

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

and my CSS is

: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;
  }
}

CodePudding user response：

It worked fine when i tried it on my pc using google as a browser, so maybe try using the right Dimensions of different phones and try out .

CodePudding user response：

It won't work because you are adding a hover effect to the nav. Hover will not work on mobile. My suggestion create a different menu for small devices.

This is what I'm getting