Yaroslav Yaroslav - 4 months ago 15
Scala Question

navbar goes down in bootstrap when using Play framework

Here is my code for a page:

@(title: String)(body: Html)

<html>
<head>
<title>@title</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("css/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("css/bootstrap-theme.min.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("css/style.css")">

<link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">

</head>

<body>

<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#exnav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@routes.HomeController.index()" class="navbar-brand">GymApp</a>
</div>
<div class="collapse navbar-collapse" id="exnav">
<ul class="nav navbar-nav navbar-left">
<li><a href="@routes.ScheduledClassesController.index()">All classes</a></li>
<li><a href="@routes.ScheduledClassesController.create()">Create a class</a></li>
</ul>
</div>
</div>
</div>
</header>

<div class="container">
@body
</div>

<script src="@routes.Assets.versioned("js/jquery-3.2.1.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("js/bootstrap.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("js/custom.js")" type="text/javascript"></script>
</body>
</html>


And here is what I see on the screen:

enter image description here

It is obvious that I would like the navbar to go in the most top. So, what is wrong in my
html
?

I am using Play Framework 2.6.

Here is how I call the view I showed above:

@layout("All classes"){

<div class="container">
<div class="jumbotron">
<h1>Welcome to GymApp</h1>
<h3>Built using Play Framework 2.6</h3>
</div>
</div>

}


style.css
file:

/*
* Copyright (C) 2009-2017 Lightbend Inc. <https://www.lightbend.com>
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
form legend{display:none;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
ol,ul{list-style:none;}
hr{display:none;visibility:hidden;}
:focus{outline:0;}
article{}article h1,article h2,article h3,article h4,article h5,article h6{color:#333;font-weight:bold;line-height:1.25;margin-top:1.3em;}
article h1 a,article h2 a,article h3 a,article h4 a,article h5 a,article h6 a{font-weight:inherit;color:#333;}article h1 a:hover,article h2 a:hover,article h3 a:hover,article h4 a:hover,article h5 a:hover,article h6 a:hover{color:#333;}
article h1{font-size:36px;margin:0 0 18px;border-bottom:4px solid #eee;}
article h2{font-size:25px;margin-bottom:9px;border-bottom:2px solid #eee;}
article h3{font-size:18px;margin-bottom:9px;}
article h4{font-size:15px;margin-bottom:3px;}
article h5{font-size:12px;font-weight:normal;margin-bottom:3px;}
article .subheader{color:#777;font-weight:300;margin-bottom:24px;}
article p{line-height:1.3em;margin:1em 0;}
article p img{margin:0;}
article p.lead{font-size:18px;font-size:1.8rem;line-height:1.5;}
article li>p:first-child{margin-top:0;}
article li>p:last-child{margin-bottom:0;}
article ul li,article ol li{position:relative;padding:4px 0 4px 14px;}article ul li ol,article ol li ol,article ul li ul,article ol li ul{margin-left:20px;}
article ul li:before,article ol li:before{position:absolute;top:8px;left:0;content:"►";color:#ccc;font-size:10px;margin-right:5px;}
article>ol{counter-reset:section;}article>ol li:before{color:#ccc;font-size:13px;}
article>ol>li{padding:6px 0 4px 20px;counter-reset:chapter;}article>ol>li:before{content:counter(section) ".";counter-increment:section;}
article>ol>li>ol>li{padding:6px 0 4px 30px;counter-reset:item;}article>ol>li>ol>li:before{content:counter(section) "." counter(chapter);counter-increment:chapter;}
article>ol>li>ol>li>ol>li{padding:6px 0 4px 40px;}article>ol>li>ol>li>ol>li:before{content:counter(section) "." counter(chapter) "." counter(item);counter-increment:item;}
article em,article i{font-style:italic;line-height:inherit;}
article strong,article b{font-weight:bold;line-height:inherit;}
article small{font-size:60%;line-height:inherit;}
article h1 small,article h2 small,article h3 small,article h4 small,article h5 small{color:#777;}
article hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:12px 0 18px;height:0;}
article abbr,article acronym{text-transform:uppercase;font-size:90%;color:#222;border-bottom:1px solid #ddd;cursor:help;}
article abbr{text-transform:none;}
article img{max-width:100%;}
article pre{margin:10px 0;border:1px solid #ddd;padding:10px;background:#fafafa;color:#666;overflow:auto;border-radius:5px;}
article code{background:#fafafa;color:#666;font-family:inconsolata, monospace;border:1px solid #ddd;border-radius:3px;height:4px;padding:0;}
article a code{color:#80c846;}article a code:hover{color:#6dae38;}
article pre code{border:0;background:inherit;border-radius:0;line-height:inherit;font-size:14px;}
article pre.prettyprint{border:1px solid #ddd;padding:10px;}
article blockquote,article blockquote p,article p.note{line-height:20px;color:#4c4742;}
article blockquote,article .note{margin:0 0 18px;padding:1px 20px;background:#fff7d6;}article blockquote li:before,article .note li:before{color:#e0bc6f;}
article blockquote code,article .note code{background:#f5d899;border:none;color:inherit;}
article blockquote a,article .note a{color:#6dae38;}
article blockquote pre,article .note pre{background:#F5D899 !important;color:#48484C !important;border:none !important;}
article p.note{padding:15px 20px;}
article table{width:100%;}article table td{padding:8px;}
article table tr{background:#F4F4F7;border-bottom:1px solid #eee;}
article table tr:nth-of-type(odd){background:#fafafa;}
article dl dt{font-weight:bold;}
article dl.tabbed{position:relative;}
article dl.tabbed dt{float:left;margin:0 5px 0 0;border:1px solid #ddd;padding:0 20px;line-height:2;border-radius: 5px 5px 0 0;}
article dl.tabbed dt a{display:block;height:30px;color:#333;text-decoration:none;}
article dl.tabbed dt.current{background: #f7f7f7;}
article dl.tabbed dd{position:absolute;width:100%;left:0;top:30px;}
article dl.tabbed dd pre{margin-top:0;border-top-left-radius:0;}
a{color:#80c846;}a:hover{color:#6dae38;}
p{margin:1em 0;}
h1{-webkit-font-smoothing:antialiased;}
h2{font-weight:bold;font-size:28px;}
hr{clear:both;margin:20px 0 25px 0;border:none;border-top:1px solid #444;visibility:visible;display:block;}
section{padding:50px 0;}
body{background:#f5f5f5;background:#fff;color:#555;font:15px "Helvetica Nueue",sans-serif;padding:0px 0 0px;}
.wrapper{width:960px;margin:0 auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:60px 0;}.wrapper:after{content:" ";display:block;clear:both;}
.wrapper article{min-height:310px;width:650px;float:left;}
.wrapper aside{width:270px;float:right;}.wrapper aside ul{margin:2px 0 30px;}.wrapper aside ul a{display:block;padding:3px 0 3px 10px;margin:2px 0;border-left:4px solid #eee;}.wrapper aside ul a:hover{border-color:#80c846;}
.wrapper aside h3{font-size:18px;color:#333;font-weight:bold;line-height:2em;margin:9px 0;border-bottom:1px solid #eee;}
.wrapper aside.stick{position:fixed;right:50%;margin-right:-480px;top:120px;bottom:0;overflow:hidden;}
.half{width:50%;float:left;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
header{position:fixed;top:0;z-index:1000;width:100%;height:50px;line-height:50px;padding:30px 0;background:#fff;background:rgba(255, 255, 255, 0.95);border-bottom:1px solid #ccc;box-shadow:0 4px 0 rgba(0, 0, 0, 0.1);}header #logo{position:absolute;left:50%;margin-left:-480px;}
header nav{position:absolute;right:50%;margin-right:-480px;}header nav a{padding:0 10px 4px;font-size:21px;font-weight:500;text-decoration:none;}
header nav a.selected{border-bottom:3px solid #E9E9E9;}
header nav a.download{position:relative;background:#80c846;color:white;margin-left:10px;padding:5px 10px 2px;font-weight:700;border-radius:5px;box-shadow:0 3px 0 #6dae38;text-shadow:-1px -1px 0 rgba(0, 0, 0, 0.2);-webkit-transition:all 70ms ease-out;border:0;}header nav a.download:hover{box-shadow:0 3px 0 #6dae38,0 3px 4px rgba(0, 0, 0, 0.3);}
header nav a.download:active{box-shadow:0 1px 0 #6dae38;top:2px;-webkit-transition:none;}
#download,#getLogo{display:none;position:absolute;padding:5px 20px;width:200px;background:#000;background:rgba(0, 0, 0, 0.8);border-radius:5px;color:#999;line-height:15px;}#download a,#getLogo a{color:#ccc;text-decoration:none;}#download a:hover,#getLogo a:hover{color:#fff;}
#getLogo{text-align:center;}#getLogo h3{font-size:16px;color:#80c846;margin:0 0 15px;}
#getLogo figure{border-radius:3px;margin:5px 0;padding:5px;background:#fff;line-height:25px;width:80px;display:inline-block;}#getLogo figure a{color:#999;text-decoration:none;}#getLogo figure a:hover{color:#666;}
#download{top:85px;right:50%;margin-right:-480px;}#download .button{font-size:16px;color:#80c846;}
#getLogo{top:85px;left:50%;padding:20px;margin-left:-480px;}#getLogo ul{margin:5px 0;}
#getLogo li{margin:1px 0;}
#news{background:#f5f5f5;color:#999;font-size:17px;box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);position:relative;z-index:2;padding:3px 0;}#news ul{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background:url(/assets/images/news.png) 10px center no-repeat;padding:19px 0 19px 60px;}
#content{padding:30px 0;}
#top{background:#80c846 url(/assets/images/header-pattern.png) fixed;box-shadow:0 -4px 0 rgba(0, 0, 0, 0.1) inset;padding:0;position:relative;}#top .wrapper{padding:30px 0;}
#top h1{float:left;color:#fff;font-size:35px;line-height:48px;text-shadow:2px 2px 0 rgba(0, 0, 0, 0.1);}#top h1 a{text-decoration:none;color:#fff;}
#top nav{float:right;margin-top:10px;line-height:25px;}#top nav .versions,#top nav form{float:left;margin:0 5px;}
#top nav .versions{height:25px;display:inline-block;border:1px solid #6dae38;border-radius:3px;background:#80c846;background:-moz-linear-gradient(top, #80c846 0%, #6dae38 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #80c846), color-stop(100%, #6dae38));background:-webkit-linear-gradient(top, #80c846 0%, #6dae38 100%);background:-o-linear-gradient(top, #80c846 0%, #6dae38 100%);background:-ms-linear-gradient(top, #80c846 0%, #6dae38 100%);background:linear-gradient(top, #80c846 0%, #6dae38 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80c846', endColorstr='#6dae38',GradientType=0 );box-shadow:inset 0 -1px 1px #80c846;text-align:center;color:#fff;text-shadow:-1px -1px 0 #6dae38;}#top nav .versions span{padding:0 4px;position:absolute;}#top nav .versions span:before{content:"⬍";color:rgba(0, 0, 0, 0.4);text-shadow:1px 1px 0 #80c846;margin-right:4px;}
#top nav .versions select{opacity:0;position:relative;z-index:9;}
#top .follow{display:inline-block;border:1px solid #6dae38;border-radius:3px;background:#80c846;background:-moz-linear-gradient(top, #80c846 0%, #6dae38 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #80c846), color-stop(100%, #6dae38));background:-webkit-linear-gradient(top, #80c846 0%, #6dae38 100%);background:-o-linear-gradient(top, #80c846 0%, #6dae38 100%);background:-ms-linear-gradient(top, #80c846 0%, #6dae38 100%);background:linear-gradient(top, #80c846 0%, #6dae38 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80c846', endColorstr='#6dae38',GradientType=0 );box-shadow:inset 0 -1px 1px #80c846;text-align:center;vertical-align:middle;color:#fff;text-shadow:-1px -1px 0 #6dae38;padding:4px 8px;text-decoration:none;position:absolute;top:41px;left:50%;margin-left:210px;width:250px;}#top .follow:before{vertical-align:middle;content:url(/assets/images/twitter.png);margin-right:10px;}
#top input{width:80px;-webkit-transition:width 200ms ease-in-out;-moz-transition:width 200ms ease-in-out;}#top input:focus{width:200px;}
#title{width:500px;float:left;font-size:17px;color:#2d6201;}
#quicklinks{width:350px;margin:-15px 0 0 0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;float:right;padding:30px;background:#fff;color:#888;box-shadow:0 3px 5px rgba(0, 0, 0, 0.2);}#quicklinks h2{color:#80c846;font-size:20px;margin-top:15px;padding:10px 0 5px 0;border-top:1px solid #eee;}#quicklinks h2:first-child{margin:0;padding:0 0 5px 0;border:0;}
#quicklinks p{margin:0;}
#quicklinks a{color:#444;}#quicklinks a:hover{color:#222;}
.tweet{border-bottom:1px solid #eee;padding:6px 0 20px 60px;position:relative;min-height:50px;margin-bottom:20px;}.tweet img{position:absolute;left:0;top:8px;}
.tweet strong{font-size:14px;font-weight:bold;}
.tweet span{font-size:12px;color:#888;}
.tweet p{padding:0;margin:5px 0 0 0;}
footer{padding:40px 0;background:#363736;background:#eee;border-top:1px solid #e5e5e5;color:#aaa;position:relative;}footer .logo{position:absolute;top:55px;left:50%;margin-left:-480px;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
footer:after{content:" ";display:block;clear:both;}
footer .links{width:960px;margin:0 auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0 auto;padding-left:200px;}footer .links:after{content:" ";display:block;clear:both;}
footer .links dl{width:33%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0 10px;float:left;}
footer .links dt{color:#80c846;font-weight:bold;}
footer .links a{color:#aaa;text-decoration:none;}footer .links a:hover{color:#888;}
footer .licence{width:960px;margin:0 auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:20px auto 0;padding-top:20px;border-top:2px solid #ddd;font-size:12px;}footer .licence:after{content:" ";display:block;clear:both;}
footer .licence .typesafe,footer .licence .zenexity{float:right;}
footer .licence .typesafe{position:relative;top:-3px;margin-left:10px;}
footer .licence a{color:#999;}
div.coreteam{position:relative;min-height:80px;border-bottom:1px solid #eee;}div.coreteam img{width:50px;position:absolute;left:0;top:0;padding:2px;border:1px solid #ddd;}
div.coreteam a{color:inherit;text-decoration:none;}
div.coreteam h2{padding-left:70px;border:none;font-size:20px;}
div.coreteam p{margin-top:5px;padding-left:70px;}
ul.contributors{padding:0;margin:0;list-style:none;}ul.contributors li{padding:6px 0 !important;margin:0;}ul.contributors li:before{content:' ';}
ul.contributors img{width:25px;padding:1px;border:1px solid #ddd;margin-right:5px;vertical-align:middle;}
ul.contributors a{color:inherit;text-decoration:none;}
ul.contributors span{font-weight:bold;color:#666;}
ul.contributors.others li{display:inline-block;width:32.3333%;}
div.list{float:left;width:33.3333%;margin-bottom:30px;}
h2{clear:both;}
span.by{font-size:14px;font-weight:normal;}
form dl{padding:10px 0;}
dd.info{color:#888;font-size:12px;}
dd.error{color:#c00;}
aside a[href^="http"]:after,.doc a[href^="http"]:after{content:url(/assets/images/external.png);vertical-align:middle;margin-left:5px;}

Answer Source

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <title> Title </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">GymApp</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">All classes</a></li>
      <li><a href="#">Create a class</a></li>
   
    </ul>
  </div>
</nav>
  
  
   <div class="container">
        <div class="jumbotron">
            <h1>Welcome to GymApp</h1>
            <h3>Built using Play Framework 2.6</h3>
        </div>
    </div>
  

</body>