Author: | bedimcode |
---|---|
Views Total: | 6,857 views |
Official Page: | Go to website |
Last Update: | September 27, 2021 |
License: | MIT |
Preview:

Description:
A mobile-friendly navigation system that transforms the site menu into a bottom navigation bar on small screens.
How to use it.
1. Create a normal navbar on your site. Note that this example uses boxicons for menu icons.
<header class="header" id="header"> <nav class="nav container"> <a href="#" class="nav__logo">Marlon</a> <div class="nav__menu" id="nav-menu"> <ul class="nav__list"> <li class="nav__item"> <a href="#home" class="nav__link active-link"> <i class='bx bx-home-alt nav__icon'></i> <span class="nav__name">Home</span> </a> </li> <li class="nav__item"> <a href="#about" class="nav__link"> <i class='bx bx-user nav__icon'></i> <span class="nav__name">About</span> </a> </li> <li class="nav__item"> <a href="#skills" class="nav__link"> <i class='bx bx-book-alt nav__icon'></i> <span class="nav__name">Skills</span> </a> </li> <li class="nav__item"> <a href="#portfolio" class="nav__link"> <i class='bx bx-briefcase-alt nav__icon'></i> <span class="nav__name">Portfolio</span> </a> </li> <li class="nav__item"> <a href="#contactme" class="nav__link"> <i class='bx bx-message-square-detail nav__icon'></i> <span class="nav__name">Contactme</span> </a> </li> </ul> </div> <img src="assets/img/perfil.png" alt="" class="nav__img"> </nav> </header>
2. Transform the navbar into a bottom navigation.
@media screen and (max-width: 320px) { .nav__name { display: none; } } @media screen and (min-width: 576px) { .nav__list { justify-content: center; column-gap: 3rem; } } @media screen and (min-width: 767px) { .nav { height: 4.5rem; } .nav__img { display: none; } .nav__icon { display: none; } .nav__name { font-size: .938rem; } .nav__link:hover { color: hsl(174, 63%, 40%); } }