How to Create a Responsive Bottom Icon Navigation Menu in Blogger

Hi to all, here I am going to tell you all about how to create a responsive bottom icon navigational menu in blogger website easily in just few minutes.

By adding this responsive bottom icon navigational bar in your blogger website will attract your visitors and helps them to find the categories in your blog.

The script I am providing here is responsive so, you can use it any of the blogger templates without any issue, but you need to paste the code correctly as mentioned in the below provided steps.

You might see this type of navigational bar in Medium UI blogger template, this will look awesome and provide good user experience and increase the attention of your visitor and they can access by click on the navigational button at the bottom.

Read the below provided steps carefully and completely to get clear idea on adding the navigational icon menu at bottom of blogger website as medium ui theme, if you miss any one step then you will definitely get error while saving the code in theme editor.

Steps to Create Bottom Navigation Bar in Blogger

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Click on Theme Section -> Arrow Icon -> Select Backup -> Download Theme.

Step-3: Blogger Dashboard -> Theme Section -> Arrow Icon -> Edit HTML -> Theme Editor.

Step-4: Copy the below provided HTML and JavaScript code and paste copied HTML and JavaScript code above closing body tag or </body> tag.

<!-- HTML Code --> <nav class='mobile' id='ATnav'> <ul> <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'> <path d='M15 13L11 9V12H2V14H11V17M22 12H20V21H4V16H6V19H18V11L12 5L7 10H4L12 2L22 12Z' fill='currentColor'/> </svg><span>Home</span></a></li> <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'> <path d='M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z' fill='currentColor'/> </svg><span>Trending</span></a> </li> <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'> <path d='M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z' fill='currentColor'/> </svg> <span>About</span></a></li> <li><a href='#'><svg viewBox='0 0 24 24'> <path d='M17.5,7A5.5,5.5 0 0,1 23,12.5A5.5,5.5 0 0,1 17.5,18C15.79,18 14.27,17.22 13.26,16H10.74C9.73,17.22 8.21,18 6.5,18A5.5,5.5 0 0,1 1,12.5A5.5,5.5 0 0,1 6.5,7H17.5M6.5,9A3.5,3.5 0 0,0 3,12.5A3.5,3.5 0 0,0 6.5,16C7.9,16 9.1,15.18 9.66,14H14.34C14.9,15.18 16.1,16 17.5,16A3.5,3.5 0 0,0 21,12.5A3.5,3.5 0 0,0 17.5,9H6.5M5.75,10.25H7.25V11.75H8.75V13.25H7.25V14.75H5.75V13.25H4.25V11.75H5.75V10.25M16.75,12.5A1,1 0 0,1 17.75,13.5A1,1 0 0,1 16.75,14.5A1,1 0 0,1 15.75,13.5A1,1 0 0,1 16.75,12.5M18.75,10.5A1,1 0 0,1 19.75,11.5A1,1 0 0,1 18.75,12.5A1,1 0 0,1 17.75,11.5A1,1 0 0,1 18.75,10.5Z' fill='currentColor'/> </svg><span>Games</span></a></li> <li><a href='#'><svg viewBox='0 0 24 24'> <path d='M14,20H10V11L6.5,14.5L4.08,12.08L12,4.16L19.92,12.08L17.5,14.5L14,11V20Z' fill='currentColor'/> </svg><span>Back-to-Top</span></a></li> </ul> </nav> <!-- JavaScript Code --> <script> //<![CDATA[ var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("ATnav").style.bottom = "0"; } else { document.getElementById("ATnav").style.bottom = "-80px"; } prevScrollpos = currentScrollPos; } //]]> </script>
Copy

Step-5: Copy the below given CSS code and paste copied CSS code above closing head tag or </head> tag.

<style> nav.mobile { display: flex; position: fixed; bottom: 0; width: 100%; padding: 0.8rem 0; background: #fefefe; border-top: 1px solid #ccc; z-index: 9999; margin: 0 auto; } .mobile { transition: 0.5s ease!important; } nav.mobile ul { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; justify-self: center; vertical-align: middle; } nav.mobile ul li { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; flex-grow: 1; margin: 0; } nav.mobile ul li a { color: #222; font-size: inherit; display: var(--prP3M8); flex-direction: var(--mZSq9k); }nav.mobile ul li a svg{width: 24px; height: 24px; display: block;margin: 0 auto; } </style>
Copy

Step-6: Now click on save button.

Step-7: It will take few seconds to process you website code and after successful processing your will see a message i.e. Updated Successfully.

Step-8: Now you have successfully added responsive bottom icon navigation menu in bogger website easily in just few minutes.

Note:

If you get any error while saving the code then you need to restore your backup code again and follow the same process as mentioned in the above steps.

If you change color and style of the navigational bar then you need to modify CSS code provided in step-5 and for color codes you can use google color picker for color codes.

If you want to change the SVG icons then you need to modify the HTML code provided in step-4, and you can find the icons from any third party website.

Conclusion

I hope that you have understood about how to create and add a responsive bottom icon navigational menu in your blogger website easily in just few minutes by using HTML, CSS and JavaScript.