"Simple Design Navbar"
Bootstrap 3.3.0 Snippet by Balaz98

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Prova</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="css/template.css" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <div class="container"> <div class="row"> <nav class="navbar"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Simple Design Navbar</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Popüler</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategoriler</a> <ul class="dropdown-menu redrop drp3x"> <div class="col-md-4"> <li><a href="#">Kültür & Sanat</a></li> <li><a href="#">Nedir / Terimler</a></li> <li><a href="#">Sosyal Sorumluluk</a></li> <li><a href="#">İlişkiler</a></li> <li><a href="#">Yeme - İçme</a></li> <li><a href="#">Aile Hayatı</a></li> <li><a href="#">Tarih'de Bugün</a></li> </div> <div class="col-md-4"> <li><a href="#">Teknoloji</a></li> <li><a href="#">Magazin</a></li> <li><a href="#">Politika / Siyaset</a></li> <li><a href="#">Spor Dünyası</a></li> <li><a href="#">Ekonomi</a></li> <li><a href="#">Dil / Farklılık</a></li> <li><a href="#">Yaşam</a></li> </div> <div class="col-md-4"> <li><a href="#">Tespit</a></li> <li><a href="#">Ekonomi / Borsa</a></li> <li><a href="#">Moda Dünyası</a></li> <li><a href="#">Sağlık</a></li> <li><a href="#">Okul Eğitimi</a></li> <li><a href="#">Süren Projeler</a></li> <li><a href="#">Gruplar</a></li> </div> </ul> </li> <li class="seperator-li"></li> <li><a href="">Giriş</a></li> <li><a href="">Üye ol</a></li> <li><a href="" class="account-wind" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="http://image.flaticon.com/icons/svg/147/147285.svg" alt="" class="pimg">Hesabım <span class="caret"></span></a> <ul class="dropdown-menu redrop drp1x"> <div class="col-md-12"> <li><a href="">Profilim</a></li> <li><a href="">Ayarlar</a></li> <li><a href="">Bilgi Kütüphanesi</a></li> <li><a href="">Çıkış</a></li> </div> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </div> </div> </div> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> </body> </html>
@charset "utf-8"; @import url(https://fonts.googleapis.com/css?family=Roboto:100,200,500,600,400,300,700&subset=latin,latin-ext); @import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,700&subset=latin,latin-ext); body { font-family: 'Fira Sans', sans-serif; font-size: 13px; background-color: #fcfcfc; } h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', sans-serif; } a { text-decoration: none; color: #999; } a:visited { text-decoration: none; color: #999; } a:focus { text-decoration: none; color: #999; } a:hover { text-decoration: none; color: #333; } p { font-family: 'Lato', sans-serif; font-size: 13px; } .wrapper { position: relative; width: 100%; } .header { padding: 30px; margin-bottom: 30px; } .navbar { padding: 10px 0px; margin-bottom: 0; background-color: #fff; border-radius: 2px; border: 1px solid #eee; border-bottom-width: 2px; } @media (max-width:1024px) { .navbar { margin-right: 30px; } } .navbar-brand { margin-left: 0px!important; display: inline-block; } .navbar-toggle { border: 2px solid #ccc; border-radius: 2px; } .navbar-toggle > .icon-bar { background-color: #ccc; } @media (max-width:768px) { .navbar-brand { margin-left: -15px; } .navbar { margin-right: 0; } } .nav > li > a { border: 1px solid transparent; } .nav > li > a:hover { background-color: transparent; } .nav > li > a:focus { background-color: #fff; } .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background-color: #fff; border-color: #eee; border-bottom-width: 0; position: relative; z-index: 99999; } .drp3x { min-width: 550px; } .drp2x { min-width: 300px; } .drp1x { min-width: 170px; } @media (max-width:1024px) { .drp3x { min-width: 170px; } } @media (max-width:768px) { .drp3x { min-width: inherit; } .drp2x { min-width: inherit; } .drp1x { min-width: inherit; } .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background-color: #fcfcfc; border-radius: 0px; border-color: #eee; border-bottom-width: 1px; border-left-width: 0; border-right-width: 0; } } .redrop { border-color: #eee; border-top-left-radius: 0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-bottom-width: 2px!important; margin-top: -1px!important; box-shadow: 0px 3px 9px #f2f2f2; padding: 15px 0px; } .redrop li { display: block; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; } .redrop li > a { padding: 5px 10px; display: block; font-size: 12px; font-family: 'Roboto', sans-serif; } .account-wind { margin-top: 4px; background-color: #fcfcfc; border-color: #eee!important; border-radius: 2px; padding-top: 10px!important; padding-bottom: 10px!important; } @media (max-width:768px) { .account-wind { border-left-width: 0!important; border-right-width: 0!important; border-radius: 0; } } .pimg { margin-top: -4px; height: 22px; margin-right: 6px; display: inline-block; } .seperator-li { height: 30px; width: 1px; background-color: #eee; margin-left: 6px; margin-right: 6px; margin-top: 9px; } @media (max-width:768px) { .seperator-li { display: none!important; } }

Related: See More


Questions / Comments: