Backside navigation for cellular screens




Hey fellow creators,

Let’s discover ways to create a lifeless simple backside navigation for small screens!

Should you want to look at the video model, it is proper right here :



1. The HTML Construction.

Create a navigation along with your hyperlinks. Right here, I’m utilizing svg information that I organised in a folder known as “ressources”.

<physique>
    <nav class="mobile-nav">
        <a href="https://dev.to/ziratsu/#" class="bloc-icon">
            <img src="ressources/dwelling.svg" alt="">
        </a>
        <a href="https://dev.to/ziratsu/#" class="bloc-icon">
            <img src="ressources/coronary heart.svg" alt="">
        </a>
        <a href="https://dev.to/ziratsu/#" class="bloc-icon">
            <img src="ressources/magnifying-glass.svg" alt="">
        </a>
        <a href="https://dev.to/ziratsu/#" class="bloc-icon">
            <img src="ressources/plus.svg" alt="">
        </a>
        <a href="https://dev.to/ziratsu/#" class="bloc-icon">
            <img src="ressources/person.svg" alt="">
        </a>
    </nav>
</physique>
Enter fullscreen mode

Exit fullscreen mode



2. Fashion the navigation bar.

First, let’s fashion the navigation bar on the backside of the display screen and ensure to house every icon evenly.

.mobile-nav {
  background: #F1F1F1;
  place: mounted;
  backside: 0;
  top: 65px;
  width: 100%;
  show: flex;
  justify-content: space-around;
}
Enter fullscreen mode

Exit fullscreen mode

Then, middle the icons horizontally and vertically within the navigation bar.

.bloc-icon {
  show: flex;
  justify-content: middle;
  align-items: middle;
}
Enter fullscreen mode

Exit fullscreen mode

You additionally want to regulate the dimensions of your icons so that they are neither too small nor too huge. I will dimension them down like so:

.bloc-icon img {
  width: 30px;
}
Enter fullscreen mode

Exit fullscreen mode



3. Add a media question.

Since it is a navigation bar just for cellular (or small screens), it is advisable add the next code in order that the navigation will disappear for screens bigger than 600 pixels.

@media display screen and (min-width: 600px) {
  .mobile-nav {
  show: none;
  }
}
Enter fullscreen mode

Exit fullscreen mode

That is it! It is lifeless easy 😉

Nevertheless, in case you have extra hyperlinks in your nav, a backside navigation like this would not actually work. Another choice would then be the hamburger menu, nevertheless it’s tougher to make use of for common customers, since they like a less complicated nav like this.

You can additionally combine the 2! For example, your first or final hyperlink may very well be a hamburger menu, and when you click on on it it may slide the menu on the left or proper aspect of the display screen.

Have enjoyable coding!

Try my Youtube channel: https://www.youtube.com/c/Learntocreate/videos

Comply with me on my social medias:
Instagram : https://www.instagram.com/learn_to_create1
TikTok : https://www.tiktok.com/@learn_to_create
Twitter : https://twitter.com/Learn_To_Create

See you quickly for different fast and straightforward tutorials !

Enzo.





Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Backside #navigation #cellular #screens