Nav bar items wont show in small screen format
Question
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>
2 answers
solution1
0 2022-04-20 13:37:39
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.
solution2
0 2022-04-20 13:39:43
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.