Creating a Responsive Nav Menu using CSS, Bootstrap, and JS Tutorial
In this tutorial, you will learn how to Create a Responsive Navigation Menu using CSS, Bootstrap, and JavaScript. This tutorial aims to provide students, self-learners, or new programmers with a reference for creating a responsive interface for a website or web application. Here, I will be providing a simple source code that demonstrates the main objective of this tutorial. The sample source code zip file is also provided and is free to download.
Why need to create a responsive web design?
The process of responsive web design (RWD) entails making web pages that display properly on a range of devices and screen sizes. It may not be required for all kinds of web applications, but this kind of web design is useful and helpful for those sites that targeted users that are also using other devices such as mobile phones/smartphones, tablets, etc. This means that you can have a website that is accessible and simple to use, even on a small screen.
What is a Navigation Menu?
Websites normally have a horizontal or vertical bar that serves as the navigation menu. Visitors may navigate your website and find their way to any page they choose, whether it's your about us page or your online store, with the help of a navigation menu. This helps your visitors or end-users to easily navigate to another part of your website or web applications.
How to Create a Responsive Custom Navigation Menu?
To create a responsive navigation menu, you must identify your target device's resolution or at least the maximum/minimum width of the device so you can create your CSS design according to the resolution of the device.
Here are the following common widths of different devices:
- Mobile or Smartphones - 320px - 480px
- Tablets or Ipads - 418px - 768px
- Laptops or Small Resolution Screens - 1025px - 1200px
- Large Screens such as TV Screens - >= 1201px
After that, you use @media at-rule of CSS to create the design for each screen. For example, the ID of your Navigation Menu Element is "NavMenu". You can use the following script.
- /** for Mobiles **/
- @media (max-width: 480px){
- #NavMenu{
- /* ... */
- }
- }
- /** for Tablets **/
- @media (max-width: 768px){
- #NavMenu{
- /* ... */
- }
- }
- /** for Desktops or Laptops **/
- @media (min-width: 1025px){
- #NavMenu{
- /* ... */
- }
- }
Using the sample CSS script, you can achieve the responsive design of your page element.
Example
Here's a simple web application source code that I created to demonstrate the creation of a Responsive Custom Navigation Menu for websites. The application contains horizontal navigation using the Bootstrap v5 Framework's navbar component and a custom toggling menu.
Interface
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
- <link rel="stylesheet" href="assets/css/styles.css">
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
- </head>
- <body>
- <main>
- <nav class="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top">
- <div class="container">
- <div class="d-flex w-100 align-items-center f">
- <button class="btn btn-default bg-transparent rounded-0 text-light" href="#" id="CustomMenuBtn">
- </button>
- <div class="" id="navbarNav">
- <ul class="navbar-nav">
- <li class="nav-item">
- </li>
- <li class="nav-item">
- </li>
- <li class="nav-item">
- </li>
- <li class="nav-item">
- </li>
- </ul>
- </div>
- <div>
- <div id="customNavigationMenu">
- <ul class="cnm-nav-list">
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- <li class="cnm-nav-menu">
- <ul class="cnm-sub-nav-list">
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </nav>
- <div id="main-wrapper">
- <div class="container-md px-5 my-3">
- <div class="col-lg-6 col-md-8 col-sm-10 col-xs-12 mx-auto">
- </div>
- </div>
- </div>
- <footer class="shadow-top py-4 col-auto">
- <div class="">
- <div class="text-center">
- </div>
- <div class="text-center">
- <a href="mailto:[email protected]" class="text-decoration-none text-body-secondary">[email protected]</a>
- </div>
- </div>
- </footer>
- </main>
- </body>
- </html>
Stylesheet
styles.css
- html, body{
- min-height:100%;
- width:100%;
- background-color: #FBF8F1;
- }
- .truncate-3{
- display: -webkit-box;
- -webkit-line-clamp:3;
- -webkit-box-orient: vertical;
- word-break: break-all;
- overflow: hidden;
- hyphens: auto;
- width:100%;
- }
- body>main{
- height: 100%;
- width: 100%;
- display: flex;
- flex-direction: column;
- }
- body>main>nav, body>main>footer{
- flex-shrink: 1;
- }
- div#main-wrapper{
- flex-grow: 1;
- overflow: auto;
- position:relative;
- min-height: 150vh;
- }
- main>nav{
- background-color: #0072b2 !important;
- }
- main>footer {
- background-color: #f3efe6;
- }
- /**
- * Post Designs
- */
- .user-img-container{
- width: 40px;
- height: 40px;
- border-radius: 50% 50%;
- }
- .post-img-single-container:not(:empty){
- width: 100%;
- min-height: 35vh;
- background-color: var(--bs-gray-200);
- padding: 0 5px;
- }
- /** Custom Responsive Menu */
- /* Remove scroll bar if Custom menu is shown*/
- body:has(#customNavigationMenu.show){
- overflow: hidden;
- }
- button#CustomMenuBtn{
- transition: transform .3s ease-in-out;
- }
- button#CustomMenuBtn:active {
- transform: rotate(90deg);
- border-color: transparent;
- }
- #customNavigationMenu{
- transition: all .3s ease-in-out;
- }
- #customNavigationMenu {
- position: absolute;
- width: 100%;
- max-height: 85vh;
- overflow: auto;
- background-color: #000;
- left: 0;
- transform: translateY(20px);
- z-index: 10;
- /* display: none;
- opacity: 0; */
- height: 0px;
- min-height: 0px;
- }
- #customNavigationMenu.show{
- height: auto;
- min-height: 60vh;
- animation: slideMenu 1s;
- }
- #customNavigationMenu.hide{
- animation: slideMenuReverse 1s;
- height: 0px;
- min-height: 0px;
- }
- @keyframes slideMenu {
- 0%{
- height: 0px;
- min-height: 0px;
- }
- 50%{
- height: auto;
- min-height: 30vh;
- }
- 100%{
- height: auto;
- min-height: 60vh;
- }
- }
- @keyframes slideMenuReverse {
- 100%{
- height: 0px;
- min-height: 0px;
- }
- 50%{
- height: auto;
- min-height: 30vh;
- }
- 0%{
- height: auto;
- min-height: 60vh;
- }
- }
- #customNavigationMenu ul.cnm-nav-list {
- width: 900px;
- margin: auto;
- margin-top: 30px;
- margin-bottom: 30px;
- display: flex;
- flex-wrap: wrap;
- }
- #customNavigationMenu ul.cnm-nav-list li.cnm-nav-menu {
- width: 33.33%;
- display: flex;
- flex-direction: column;
- justify-content: start;
- min-height: 35px;
- }
- #customNavigationMenu ul.cnm-nav-list ul.cnm-sub-nav-list li.cnm-nav-menu {
- width: 100%;
- }
- #customNavigationMenu ul.cnm-nav-list>li.cnm-nav-menu {
- margin-bottom: 15px;
- }
- #customNavigationMenu ul.cnm-nav-list li.cnm-nav-menu a.cnm-nav-link {
- color: #fff;
- text-decoration: none;
- font-weight: 500;
- font-size: 1.1rem;
- }
- #customNavigationMenu ul.cnm-nav-list>li.cnm-nav-menu>a {
- font-size: 1.3rem !important;
- font-weight: 700;
- padding: 5px;
- }
- #customNavigationMenu ul.cnm-nav-list li.cnm-nav-menu a.cnm-nav-link:hover {
- text-decoration: underline;
- }
- /** Make Navigation Bar and Custom Navigation Bar Menu Responsive */
- @media (max-width:1000px) {
- #navbarNav li.nav-item:nth-child(2) ~ li{
- display: none;
- }
- }
- @media (max-width:990px) {
- #customNavigationMenu ul.cnm-nav-list{
- width: 100%;
- }
- #navbarNav li.nav-item:nth-child(1) ~ li{
- display: none;
- }
- main>nav .w-100{
- width: auto !important;
- }
- }
- @media (max-width:900px) {
- #customNavigationMenu{
- width: 100%;
- }
- #customNavigationMenu ul.cnm-nav-list li.cnm-nav-menu{
- width: 50%;
- }
- }
- @media (max-width:670px) {
- #customNavigationMenu ul.cnm-nav-list {
- margin-top: 5px;
- margin-bottom: 5px;
- }
- #customNavigationMenu ul.cnm-nav-list li.cnm-nav-menu{
- width: 100%;
- }
- #navbarNav li{
- display: none;
- }
- main>nav .d-flex {
- flex-direction: row-reverse;
- }
- }
JavaScript
custom-menu.js
- const toggleButton = document.getElementById('CustomMenuBtn')
- const customMenuContainer = document.getElementById('customNavigationMenu')
- const toggleIcon = `<i class="fa fa-bars"><i>`
- const toggleCloseIcon = `<i class="fa fa-times"><i>`
- window.onload = function(){
- toggleButton.classList.add('hide')
- document.getElementById('main-wrapper').style.marginTop = document.querySelector('main>nav').clientHeight + 'px'
- }
- window.onresize = function(){
- document.getElementById('main-wrapper').style.marginTop = document.querySelector('main>nav').clientHeight + 'px'
- }
- // Open Custom Navigation Menu onClick
- toggleButton.addEventListener("click", function(e){
- if(!customMenuContainer.classList.contains("show")){
- if(customMenuContainer.classList.contains("hide"))
- customMenuContainer.classList.remove("hide")
- customMenuContainer.classList.add("show")
- toggleButton.innerHTML = toggleCloseIcon
- }else{
- customMenuContainer.classList.remove("show")
- toggleButton.innerHTML = toggleIcon
- }
- })
Snapshots
Here are the snapshots of the outcome of the application source code I provided above.
Desktop or Website View
Tablets or Ipads View
Mobile or Smartphones View
DEMO VIDEO
I also provided the source code zip file of the sample application I created for this tutorial on this site and it is free to download. You download it by clicking the Download button located below this tutorial's content.
That's the end of this tutorial. I hope this Creating a Responsive Nav Menu using CSS, Bootstrap, and JS Tutorial will help you and will be useful for your current and future projects.
Explore more on this website for more Tutorials and Free Source Codes.
Happy Coding =)
Add new comment
- 572 views