Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
	<meta charset="UTF-8">
 	
 	<title>Bootstrap Komponente - Horizontal Menu</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	
  <link rel="stylesheet" type="text/css" href="/0frameworks/css_frameworks/bootstrap-3.1.1/dist/css/bootstrap.min.css">
  <script src="/0frameworks/css_frameworks/bootstrap-3.1.1/js/tests/vendor/jquery.js"></script>
  <script src="/0frameworks/css_frameworks/bootstrap-3.1.1/dist/js/bootstrap.min.js"></script>
  
  <style>
    /* NAVBAR DECREISED HEIGHT */
    
    /* Navbar Height */
    .navbar 
    { 
      height: 35px !important;
      min-height: 35px !important;
      background-color: #FA7206 !important;
      color: !important;
    }

/* Navbar Links */
    .navbar>div>div>ul>li>a 
    { 
      height: 34px !important;
      min-height: 34px !important;
      font: 15px Verdana;
      line-height: 40%;
      color: #FAF8D2 !important;
      background-color: #FA7206;
    }
    .navbar>div>div>ul>li>a:hover
    { 
      background-color: #F3832A !important;
    }

/* Dropbox Links */
    .navbar>div>div>ul>li>ul>li>a 
    { 
      height: 28px !important;
      min-height: 28px !important;
      font: 12px Verdana;
      line-height: 150%;
      /*color: #477A29 !important;*/
    }

/* Company Logo */
    .navbar>div>div>a {
      font: 20px Georgia;
      line-height: 30%;
      color: #FDF109 !important;
    }

/* Dropbox */
    .navbar>div>div>ul>li>ul>li>a {
      color: #FAF8D2 !important;
    }
    .navbar>div>div>ul>li>ul>li>a:hover {
      background-color: #F3832A !important;
    }
    .navbar>div>div>ul>li>ul {
      background-color: #F3944A !important;
    }

/* Active Link */
    .active>a {
      background-color: #6FAC10 !important;
    }

/* Dropdown Open */
    .dropdown.open>a {
      background-color: #F3832A !important;
    }

/* SMALL DEVICESS >768px */
@media (max-width: 768px) {

/* Navbar button */
    .navbar button {
      height: 28px !important;
      min-height: 28px !important;
      margin-top: 2px;
      padding-top: 7px;
      background: #FDF109;
      border-color: #FA4406 !important;
    }

.navbar button:hover,
    .navbar button:focus {
      background-color: #FFDB00 !important;
    }

.navbar-header {
      height: 35px !important;
      min-height: 35px !important;
    }
    .collapse>.nav {
      padding-top: 0;
      margin-top: 0;
    }
    .collapse>.nav>li {
      background-color: #F3832A;
    }
    .collapse.navbar-collapse {
      position: absolute;
      top: 37px;
      width: 100% !important;
    }

.icon-bar {
      background-color: #FA7206 !important;
    }
  
}
  
  </style>

</head>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    
    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nv">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon icon-bar"></span>
        <span class="icon icon-bar"></span>
        <span class="icon icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Company Logo</a>
    </div>

<div class="collapse navbar-collapse" id="nv">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>

<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" data-toggle="tab">Drop 1</a></li>
            <li><a href="#" data-toggle="tab">Drop 2</a></li>
          </ul>
        </li>

<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" data-toggle="tab">Drop A</a></li>
            <li><a href="#" data-toggle="tab">Drop B</a></li>
          </ul>
        </li>

</ul>
    </div>

</div>
</nav>

<div class="container">
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h3>NESTO</h3>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h3>OPIS</h3>
Izmjenjeni menu.
 <br>
 <br>
 <br>
 <br>
 <br>

<h3>LOREM</h3>
Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae 
convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed 
luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor 
vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi 
vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet 
fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
Curae; Sed eu elementum nibh, quis varius libero.Vestibulum quis quam ut magna consequat faucibus. Pellentesque 
eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. 
Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus 
blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. 
Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt 
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.Phasellus fermentum, 
neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat 
quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa en
im elementum purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. 
Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices
 risus felis in orci. Quisque vestibulum sem nisl, vel congue leo dictum nec. Cras eget est at velit sagitt
 is ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitu
 din lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus r
 honcus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare
  egestas mauris facilisis id.Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifen
  d. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commo
  do turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, e
  u malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dol
  or ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla suscipit co
  nvallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nun
  c. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa.
  </div>
</div>

</div>

</body>
</html>

Pregled stranice:

Pogledaj stranicu ../css/bootstrap/primjeri/802horiz_menu_height.html.