Create Responsive Model Dropdown Navigation Bar

Its features:

  • It is completely responsive.

  • Touching the button will display a dropdown.

  • You can add a link to the name of each menu.

  • You can change the hover color via CSS if you want.

  • It is a hoverable dropdown navbar.

Try to create like yourself by following the codes below :

Step 1) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/4.7.0/css/font-awesome.min.css">
Step 2) Add to html : <div class="center"> <div class="dropdown"> <button class="button button">Link Text <i class="fa fa-caret-down"></i></button> <br><br> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> <div class="dropdown"> <button class="button button">Link Text <i class="fa fa-caret-down"></i></button> <br><br> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> <div class="dropdown"> <button class="button button">Link Text <i class="fa fa-caret-down"></i></button> <br><br> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> <div class="dropdown"> <button class="button button">Link Text <i class="fa fa-caret-down"></i></button> <br><br> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> <div class="dropdown"> <button class="button button">Link Text <i class="fa fa-caret-down"></i></button> <br><br> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> </div>
Step 3) Add to css : .center { display: flex; justify-content: center; align-items: center; } .button { padding: 8px 18px; font-size: 15px; background-image: linear-gradient(#e8e4c9, #ffffe5, #e8e4c9); color: black; border: 2px solid #4CAF50; border-radius:30px; } .button:hover { background-image: linear-gradient(#c68642, #8d5524, #c68642); color: white; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #cc8899; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; border:2px solid white; } .dropdown-content a:hover { background-color: #ff6700; } .dropdown:hover .dropdown-content { display: block; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.