"Untitled"
Bootstrap 4.1.1 Snippet by omnath

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="navbar.css"> <title>Your Website</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script> <!-- Popper JS --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <section class="col-lg-12 col-md-12 col-sm-12 col-12"> <!-- Contact Navbar --> <div class="top-head pt-1"> <div class=""> <div class="row"> <div class="col-md-12 text-right"> <ul class="list-inline "> <a href="tel: +919051918008"><li class="list-inline-item"><small><i class="fa fa-phone"></i> +91 9051918008</small></li></a> <a href="contact"><li class="list-inline-item"><small><i class="fa fa-commenting-o" aria-hidden="true"></i>Feedback</small></li></a> <!--<a href="contact"><li class="list-inline-item"><small> Help</small></li></a>--> <a href="track_my_order"><li class="list-inline-item"><small><i class="fa fa-search" aria-hidden="true"></i>Track Order</small></li></a> <a href="cart"><li class="list-inline-item"><small><i class="fa fa-shopping-basket" aria-hidden="true"></i>Cart</small></li></a> </ul> </div> </div> </div> </div> </section> <header> <nav class="navbar"> <div class="allcat"> <a class="navbar-all-category" href="#">All <br>Category</a> </div> <div class="navbar-logo"> <a href="./"> <img src="https://skyldev.com/images/logo/Skyldev-logo-rectangular.png" alt="Logo"> </a> </div> <div class="navbar-address allcat"> <a href="#">Select <br>Your Address</a> </div> <div class="navbar-search pl-4"> <form class="form-inline" method="get" action="/search.php" enctype="multipart/form-data"> <input type="text" placeholder="Search..."> <button type="submit">Search</button> </form> </div> <div class="navbar-actions"> <!-- Add this inside the .navbar-actions div, before the other links --> <a href="./"><i class="fa fa-home" aria-hidden="true"></i>Home</a> <a href="login"><i class="fa fa-user" aria-hidden="true"></i>Account</a> <a href="cart"><i class="fa fa-shopping-bag" aria-hidden="true"></i>Cart</a> </div> </nav> </header> <nav class="navbar navbar-expand-sm bg-dark navbar-dark d-md-none"> <form class="form-inline" method="get" action="/search.php" enctype="multipart/form-data"> <input type="text" placeholder="Search..."> <button type="submit">Search</button> </form> </nav> <!-- Add this inside the <body> tag, before the <header> --> <!-- Add this inside the <body> tag, before the <header> --> <div class="sidebar"> <div class="sidebar-header"> <h3>All Categories</h3> <button class="close-sidebar">×</button> </div> </div> <div class="address-popup" id="addressPopup"> <div class="popup-content"> <span class="close-btn" id="closePopup">×</span> <h2>Select Your Address</h2> <input type="text" placeholder="Enter your address"> <button id="applyAddress">Apply</button> </div> </div> <!-- Rest of your website content --> <script src="navbar.js"></script> </body> </html>
/* Navbar styles */ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #232f3e; color: #ffffff; padding: 10px 20px; font-size: 17px; } .navbar-logo img { height: 50px; /* Adjust as needed */ } /* ... Previous CSS rules ... */ .navbar-search { flex: 1; max-width: 70%; } .navbar-search input[type="text"] { width: 60%; padding: 8px; border: none; border-radius: 4px; } .navbar-search button { padding: 8px 15px; background-color: #ff9900; border: none; border-radius: 4px; color: #ffffff; cursor: pointer; } .navbar-actions a { text-decoration: none; color: #ffffff; margin-left: 10px; transition: color 0.3s ease; display: inline-flex; /* Display the links as flex items */ flex-direction: column; /* Stack the icon and text vertically */ align-items: center; /* Center items horizontally */ justify-content: center; /* Center items vertically */ text-align: center; /* Center the text within the link */ } .navbar-actions a:hover { color: #ff9900; } .allcat a { text-decoration: none; color: #ffffff; transition: color 0.3s ease; /* Add a transition effect for color changes */ } .allcat a:hover { color: #ff9900; /* Change the color on hover */ } /* Popup styles */ .address-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); text-align: center; } .close-btn { position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer; } .popup-content h2 { margin-bottom: 10px; } .popup-content input[type="text"] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; } .popup-content button { padding: 8px 15px; background-color: #ff9900; border: none; border-radius: 4px; color: #ffffff; cursor: pointer; } .sidebar { position: fixed; top: 0; left: -100%; /* Initially off-screen */ width: 300px; height: 100%; background-color: #232f3e; color: #ffffff; padding: 20px; transition: left 0.3s ease-in-out; z-index: 1000; overflow-y: auto; /* Add this to enable vertical scrolling */ } .sidebar.active { left: 0; /* Slide in when active */ } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .close-sidebar { background: none; border: none; font-size: 24px; color: #ffffff; cursor: pointer; } .category h4 { font-size: 18px; margin-bottom: 10px; cursor: pointer; background-color: #35495e; /* Category background color */ padding: 8px; border-radius: 4px; } .subcategory h5 { font-size: 16px; margin-bottom: 5px; cursor: pointer; background-color: #50677e; /* Subcategory background color */ padding: 8px; border-radius: 4px; } .options { /* display: none;*/ font-size: 16px; background-color: #5e7f98; /* Options background color */ padding: 8px; border-radius: 4px; margin-top: 5px; /* Add a small margin to separate options */ list-style: none; } .options li{ margin-bottom: 8px; /* Add space between list items */ line-height: 1.4; /* Improved line spacing */ } .options a{ text-decoration: none; color: #ffffff; transition: color 0.3s ease; } .options a:hover { color: #ff9900; /* Change the color on hover */ } /* Add this to style collapsed categories and subcategories */ .category.collapsed .subcategory { display: none; } /* Add this to style collapsed subcategories' options */ .subcategory.collapsed .options { display: none; } .category-toggle, .subcategory-toggle .options-toggle{ cursor: pointer; } .subcategory.active { display: block; /* Display when active */ } .options.active { display: block; /* Hide options by default */ } .subcategory.active .options { display: block; /* Display options when subcategory is active */ } /* Add this to style collapsed categories and subcategories */ .category.collapsed .subcategory { display: none; } /* Add this to style collapsed subcategories' options */ .subcategory.collapsed .options { display: none; } /* ... Previous CSS rules ... */ @media (max-width: 767px) { .navbar-search { display: none; /* Hide the search bar on small screens */ } .form-inline { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px; } .form-inline input[type="text"] { width: 70%; /* Input field takes 70% of the width */ padding: 10px; border: none; border-radius: 4px; } .form-inline button { width: 20%; /* Button takes 20% of the width */ padding: 10px 15px; background-color: #ff9900; border: none; border-radius: 4px; color: #ffffff; cursor: pointer; } .navbar-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; /* Add some space from the header */ padding: 10px; /* Add padding to the buttons for better touch interaction */ background-color: #232f3e; /* Match the navbar background color */ position: fixed; bottom: 0; left: 0; width: 100%; } .navbar-actions a { text-decoration: none; color: #ffffff; margin: 0 5px; /* Add padding between buttons */ text-align: center; width: 33.33%; /* Distribute buttons evenly */ } }
const sidebar = document.querySelector('.sidebar'); const openSidebarButton = document.querySelector('.navbar-all-category'); const closeSidebarButton = document.querySelector('.close-sidebar'); const categoryHeaders = document.querySelectorAll('.category h4'); const subcategoryHeaders = document.querySelectorAll('.subcategory h5'); openSidebarButton.addEventListener('click', (event) => { event.preventDefault(); sidebar.classList.add('active'); }); closeSidebarButton.addEventListener('click', () => { sidebar.classList.remove('active'); }); categoryHeaders.forEach(header => { header.addEventListener('click', () => { header.parentElement.classList.toggle('collapsed'); }); }); subcategoryHeaders.forEach(header => { header.addEventListener('click', () => { header.parentElement.classList.toggle('collapsed'); }); }); document.addEventListener("DOMContentLoaded", function () { const addressPopup = document.getElementById("addressPopup"); const openPopup = document.querySelector(".navbar-address"); const closePopup = document.getElementById("closePopup"); openPopup.addEventListener("click", function () { addressPopup.style.display = "block"; }); closePopup.addEventListener("click", function () { addressPopup.style.display = "none"; }); });

Related: See More


Questions / Comments: