<!– Bootstrap 3 Enhanced Navigation Menu –> <nav class=“navbar navbar-default” role=“navigation”>

<div class="container-fluid">
  <!-- Brand and mobile toggle -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
      <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="navbar-brand" href="https://albarafacil.com">
      <i class="glyphicon glyphicon-file"></i> Albarafacil.com
    </a>
  </div>

  <!-- Main navigation -->
  <div class="collapse navbar-collapse" id="main-nav">
    <ul class="nav navbar-nav">
      <!-- Home -->
      <li>
        <a href="https://albarafacil.com/documentacion/doku.php?id=start">
          <i class="glyphicon glyphicon-home"></i> Inicio
        </a>
      </li>
      
      <!-- Modules Dropdown -->
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="glyphicon glyphicon-th-large"></i> Módulos <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="https://albarafacil.com/documentacion/doku.php?id=admin">
              <i class="glyphicon glyphicon-cog"></i> Administración
            </a>
          </li>
          <li>
            <a href="https://albarafacil.com/documentacion/doku.php?id=app">
              <i class="glyphicon glyphicon-phone"></i> Aplicación
            </a>
          </li>
        </ul>
      </li>
      
      <!-- Info Dropdown -->
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="glyphicon glyphicon-info-sign"></i> Información <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="https://albarafacil.com/documentacion/doku.php?id=about">
              <i class="glyphicon glyphicon-question-sign"></i> Sobre Albarafacil.com
            </a>
          </li>
        </ul>
      </li>
    </ul>
    
    <!-- Search Form -->
    <form class="navbar-form navbar-right" action="https://albarafacil.com/documentacion/doku.php" method="get">
      <div class="input-group">
        <input type="hidden" name="do" value="search">
        <input type="text" class="form-control" name="id" placeholder="Buscar...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </span>
      </div>
    </form>
  </div>
</div>

</nav>

<style> /* Custom styling for the enhanced menu */ .navbar {

margin-bottom: 20px;
border-radius: 4px;

}

.navbar-brand {

font-weight: bold;
color: #2c3e50 !important;

}

.navbar-nav > li > a {

color: #34495e;
font-weight: 500;

}

.navbar-nav > li > a:hover {

color: #2c3e50;
background-color: #ecf0f1;

}

.dropdown-menu > li > a {

color: #34495e;
padding: 8px 20px;

}

.dropdown-menu > li > a:hover {

background-color: #3498db;
color: white;

}

.navbar-toggle {

border-color: #bdc3c7;

}

.navbar-toggle .icon-bar {

background-color: #7f8c8d;

}

/* Active state styling */ .dw__you_are_here > a {

background-color: #3498db !important;
color: white !important;

}

/* Mobile responsiveness */ @media (max-width: 767px) {

.navbar-nav .open .dropdown-menu {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.navbar-form {
  margin-top: 10px;
  margin-bottom: 10px;
  border: none;
  box-shadow: none;
}

}

/* Search form styling */ .navbar-form .input-group {

width: 200px;

}

@media (max-width: 768px) {

.navbar-form .input-group {
  width: 100%;
}

} </style>

<!– Load Bootstrap JS if not already loaded –> <script> Simple check for Bootstrap and load if needed if (typeof jQuery === 'undefined') { document.write('<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”><\/script>'); } if (typeof $.fn.modal === 'undefined') { document.write('<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”><\/script>'); } </script>