<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 ---------->
<div class="container">
<label class="control-label">Welcome Mr. Nuon Veyo</label>
<div class="row">
<div class="header">
<ul>
<li>
<div class="row"><span class="glyphicon glyphicon-dashboard"> </div>
<div class="row"><a href="#"></span>Dashboard</a></div>
</li>
<li>
<div class="row"><span class="glyphicon glyphicon-user"> </div>
<div class="row"><a href="#"></span>User</a></div>
</li>
<li>
<div class="row"><span class="glyphicon glyphicon-cog"> </div>
<div class="row"><a href="#"></span>Setting</a></div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12" id="right-content">
Subtitle: Content value<br/>
Content itself is what the end-user derives value from. Thus, "content" can refer to the information provided through the medium, the way in which the information was presented, as well as the added features included in the medium in which that information was delivered. The medium however, provides little to no value to the end-user without the information and experiences that make up the content. Communication theory philosopher Marshall McLuhan famously coined the phrase, "The medium is the message."[3] In the case of content, the channel through which information is delivered, the "medium", affects how the end user perceives content, the "message".
The author, producer or publisher of an original source of information or experiences may or may not be directly responsible for the entire value that they attain as content in a specific context. For example, part of an original article (such as a headline from a news story) may be rendered on another web page displaying the results of a user's search engine query grouped with headlines from other news publications and related advertisements. The value that the original headline has in this group of query results from the search engine as a medium may be very different from the value that it had as message content in its original article.
Content also leads to influencing other people in creating their own content, sometimes in a way that the original author didn't or couldn't plan or imagine. This feature adding the option of user innovation in a medium means users can develop their own content from existing content.
</div>
</div>
</div>
.header{
z-index: 500;
height: 85px;
width: 100%;
background-color: #284c79;
color: rgb(136, 172, 217);
}
.header ul{
margin: 0;
padding: 0;
}
.header li{
width: 100px;
height: 85px;
background-color: rgba(52, 73, 94,1.0);
padding: 20px 0 0 0px;
text-align: center;
float: right;
list-style: none;
margin-left: 1px ;
}
.header li a{
font-family:cursive;
text-decoration: underline;
color: rgb(136, 172, 217);
}
.header li a:hover{
font-size: 12px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease-in-out;
color: ghostwhite;
}
.header-placeholder{
margin: 0 0 0 0;
}
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
.fixed .header-inner{
padding: 0 20px;
}
.fixed .header-inner-most{
max-width:1160px;
margin: 0 auto;
background-color: #284c79;
}
#right-content{
height: 600px;
}
jQuery(document).ready(function (){
var navOffset = jQuery(".header").offset().top;
$(".header").wrap('<div class="header-placeholder"></div>');
$(".header-placeholder").height($(".header").outerHeight());
$(".header").wrapInner('<div class="header-inner"></div>');
$(".header-inner").wrapInner('<div class="header-inner-most"></div>');
jQuery(window).scroll(function (){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery('.header').addClass('fixed');
}else{
jQuery('.header').removeClass('fixed');
}
});
});
