<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> <h1>Title</h1> <div id="myText" class="well" >pricing click!</div> <button class="btn btn-lg btn-success">Try</button> </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() { $("#pricing").click(function(event){ $("#myText").html("ok"); event.preventDefault(); }); });