<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container myContent" style="font-family: 'Strait', sans-serif;"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="landing_page.html">Company name</a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" 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="btn btn-primary navbar-btn pull-right" href="#" role="button">Sign up</a> --> </div> <div class="btn-group pull-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Customer area <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div id="nav-menu" class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li><a href="#about">About</a></li> <li><a href="#features">Features</a></li> <li><a id="pricing" href="#pricing">Pricing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </nav> <!-- içerik bitiş --> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-g soltaraf"><!-- sol taraf başlangıç --> <div class="featured-article"> <a href="#" id="manset_url"> <img style="border-radius:5px;margin:1px 0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjownIXRmM6dJ7Icr-XYwqVVXN0buvuvsqrDWF5msZmJYYK8xSF8BuhZ-RPcn8Nf07em1Q5VZd6mUzJ4E63I7kZs9OA3RUo3f926a2uQMa3plHTPbAfEE7wXOX6KD8balgpzMhknYOLP7SsocU93CMdvFY5_zFlrt1Qyc-gGfvu1eclLsnLX2W9TpnPnWOZ/s1600/obphaber.jpg" width="100%"/> <div class="block-title"> <h2 id="manset_h2" style="color:#910910">.</h2> </div> </a> </div> <h3 style="color:#000" id="description">Text</h3> <button id="pricing" class="btn btn-lg btn-primary">Tıkla</button> </div><!-- sol taraf bitiş --> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-g sagtaraf"><!-- sağ taraf başlanıç ---> <h1>Mehmet</h1> </div><!-- sağ taraf bitiş --> </div> </div>

nav .btn-group { margin: 0.8rem 2rem 0 0; } @media(max-width: 48em){ nav .btn-group { position: absolute; top: 0; right: 4em; } } #nav-menu { margin-right: 1rem; } .myContent { margin-top:60px; } .hidden-element { display: none; } .navbar-default { background-color: #FFBE52 !important; } a.navbar-brand { color: #000 !important; } #nav-menu ul li a { color: #000 !important; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-toggle { background-color: #337AB7; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: #214E75; } .navbar-default .navbar-toggle { border-color: #214E75; }

$(document).ready(function() { //-- navbar click $('#nav-menu a').on('click', function() { if ($('.navbar-toggle').is(':visible')) { $('.navbar-collapse').collapse('hide'); } }); //--- click bitiş $("button").click(function(){ $("#description").text("Okey"); }); });