<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div> <div class="topnav"> <ul> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> <li><a href="#contact" title="">Contact</a></li> <li><a href="/forrestaurant/#" title="">For Restaurants</a></li> <li><a href="/forbusiness/#" title="">For Business</a></li> <div> <a href="/home"> <span class="span-logo"> <!-- <img src="./static/image/fancy_monk_logo_final.png" /> --> <!-- <img src="./static/fancymonk_logo/ic_fancy_monk_white.png" /> --> <img src="http://fancymonk.com/static/fancymonk_logo/ic_fancy_monk_white_small_128.png"> <!-- <p>Fancymonk</p> --> </span> </a> </div> </ul> </div> <section id="main"> <div class="fancy-monk"> <h1>Fancymonk</h1> <div> <div class="signinup"> <div>Not a member yet?</div> <div>Sign up now</div> <div> <input type="button" value="signin" class="btn btn-danger"> <input type="button" value="signup" class="btn btn-danger"> </div> </div> </div> </div> </section> </div>

/*nav-bar*/ .topnav ul { border-bottom: 1px solid #B71C1C; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #ce1e42; max-height: 70px; position: fixed; top: 0; width: 100%; z-index: 10; } .topnav ul li { float: right; } .topnav ul li a { font-size: 16px; display: inline-block; color: #f2f2f2; text-align: center; padding: 23px 20px; text-decoration: none; transition: 0.3s; } .span-logo img { display: inline-block; vertical-align: top; height: 75px; min-height: 75px; width: 75px; min-width: 75px; float: left; padding: 0px; } .span-logo p { font-size: 16px; text-decoration: none; color: #f2f2f2; float: left; padding: 15px 0px; } .topnav ul li a:hover {background-color: #560909;} .topnav ul li.icon {display: none;} @media screen and (max-width:680px) { .topnav ul li:not(:first-child) {display: none;} .topnav ul li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { .topnav.responsive ul {position: relative;} .topnav.responsive ul li.icon { position: absolute; right: 0; top: 0; } .topnav.responsive ul li { float: none; display: inline; } .topnav.responsive ul li a { display: block; text-align: left; } } .fancy-monk { font-size: 25px; color: #EFEBE9; margin: 0px; text-align: center; height: 600px; min-height: 400px; background-image: url("http://fancymonk.com/static/image/4a89649bb545af9469aa5a370fb74fb69.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0.5px); } .fancy-monk h1 { font-size: 40px; margin: 0; padding-top: 150px; } .signinup{ width:100%; height:135vh; background:grey; opacity:0.6; } .btn-danger{ background:#ce1e42; width:300px; }