"Responsive menu"
Bootstrap 3.3.0 Snippet by saikiran053

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- comment if you use bootstrap links <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> --> <style> *{font-family:Roboto;} .navbar-default { background-color: rgb(51, 103, 214); border-color: #3367d600; border: 0px; border-radius: 0px; margin-bottom: 0px; } .navbar-default .navbar-nav>li>a { color: #fff; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #fff; background-color: rgb(39, 81, 172); } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { color: #fff; background-color: rgb(39, 81, 172); } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #fff; background-color: transparent; } .navbar-brand img{width: 130px;} .navbar-toggle { position: relative; float: right; padding: 8px 8px; margin-top: 9px; margin-right: 15px; margin-bottom: 8px; background-color: white; background-image: none; border: 1px solid transparent; border-radius: 2px; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu>li>a { color: #fff; } } @media (max-width: 767px){ .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: #254b9e; border: 0; -webkit-box-shadow: none; box-shadow: none; }} </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img class="img-responsive" src="https://ujg1i3ze1133y9zav35eixy117m-wpengine.netdna-ssl.com/wp-content/themes/dt-the7-child/assets/images/global/logo-long-notag.png" alt="Chania"></a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Services-1</a></li> <li><a href="#">Services-2</a></li> <li><a href="#">Services-3</a></li> <li><a href="#">Services-4</a></li> </ul> </li> <li><a href="https://dribbble.com/saikiran053" target="_blank">Follow @ Dribble</a></li> <li><a href="https://www.behance.net/sakiran" target="_blank">Follow @ Behance</a></li> </ul> </div> </div> </nav> </body> </html>

Related: See More

Vuetify Material Dashboard
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/

Questions / Comments:

où est le fichier JavaScript

yassinebelcaid () - 7 years ago - Reply 0