Tema: menu canvas no funciona
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 19/06/2017, 02:04
macaluan
 
Fecha de Ingreso: junio-2014
Mensajes: 70
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: menu canvas no funciona
Gracias manu, Como no se donde puede estar el asunto, te pongo todo lo referente al menú.

Gracias de antemano.

Código HTML: 
Ver original
  1. <div id="fh5co-header">
  2.         <div class="container">
  3.             <!-- Mobile Toggle Menu Button -->
  4.             <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
  5.             <div id="fh5co-logo">
  6.                 <a href="../index.html">PHOTOGRAPHY<span>.</span></a>
  7.             </div>
  8.             <nav id="fh5co-main-nav">
  9.                 <ul>
  10.                     <li><a href="home.html#fh5co-home" class="transition">HOME</a></li>
  11.                         <li><a href="home.html#fh5co-portfolio" class="transition">PORTFOLIO</a></li>
  12.                         <li><a href="home.html#fh5co-about" class="transition">ABOUT</a></li>
  13.                         <li><a href="home.html#fh5co-contact" class="transition">CONTACT</a></li>
  14.                 </ul>
  15.             </nav>
  16.         </div>
  17.     </div>

Código CSS: 
Ver original
  1. #fh5co-header #fh5co-main-nav {
  2.   float: right;
  3. }
  4. @media screen and (max-width: 768px) {
  5.   #fh5co-header #fh5co-main-nav {
  6.     display: none;
  7.   }
  8. }
  9. #fh5co-header #fh5co-main-nav ul {
  10.   padding: 0;
  11.   margin: 4px 0 0 0;
  12. }
  13. #fh5co-header #fh5co-main-nav ul li {
  14.   padding: 0;
  15.   margin: 0;
  16.   display: inline;
  17. }
  18. #fh5co-header #fh5co-main-nav ul li a {
  19.   font-family: "Source Sans Pro", sans-serif;
  20.   color: rgba(255, 255, 255, 0.8);
  21.   text-decoration: none;
  22.   margin-left: 30px;
  23.   border-bottom: 2px solid transparent;
  24. }
  25. #fh5co-header #fh5co-main-nav ul li a:hover {
  26.   text-decoration: none;
  27.   color: #6BB6E6;
  28.  
  29. }
  30. #fh5co-header #fh5co-main-nav ul li.active a {
  31.   color: #6BB6E6;
  32. }
  33.  
  34. #fh5co-header.navbar-fixed-top {
  35.   position: fixed !important;
  36.   background: #fff;
  37.   -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  38.   -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  39.   -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  40.   box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  41.   top: 0;
  42.   left: 0px;
  43. }
  44. #fh5co-header.navbar-fixed-top #fh5co-logo {
  45.   float: left;
  46.   line-height: 1.2;
  47. }
  48. #fh5co-header.navbar-fixed-top #fh5co-logo a {
  49.   font-family: "Source Sans Pro", sans-serif;
  50.   font-size: 30px;
  51.   color: #000;
  52. }
  53. #fh5co-header.navbar-fixed-top #fh5co-main-nav ul li a {
  54.   font-family: "Source Sans Pro", sans-serif;
  55.   color: rgba(0, 0, 0, 0.8);
  56.   text-decoration: none;
  57.   margin-left: 30px;
  58.   border-bottom: 2px solid transparent;
  59. }
  60. #fh5co-header.navbar-fixed-top #fh5co-main-nav ul li a:hover {
  61.   text-decoration: none;
  62.   color: #6BB6E6;
  63. }
  64. #fh5co-header.navbar-fixed-top #fh5co-main-nav ul li.active a {
  65.   color: #6BB6E6;
  66.   border-bottom: 2px solid transparent;
  67. }
  68. #fh5co-main,
  69. #fh5co-offcanvas {
  70.   -webkit-transition: 0.8s;
  71.   -o-transition: 0.8s;
  72.   transition: 0.8s;
  73. }
  74.  
  75. #fh5co-offcanvas {
  76.   position: fixed;
  77.   top: 0;
  78.   right: 0;
  79.   bottom: 0;
  80.   z-index: 9999;
  81.   width: 275px;
  82.   background: #444853;
  83.   overflow-y: auto;
  84.   padding: 50px 30px 30px 30px;
  85.   -moz-transform: translateX(275px);
  86.   -webkit-transform: translateX(275px);
  87.   -ms-transform: translateX(275px);
  88.   -o-transform: translateX(275px);
  89.   transform: translateX(275px);
  90. }
  91. #fh5co-offcanvas .fh5co-offcanvas-close {
  92.   position: absolute;
  93.   top: 20px;
  94.   right: 30px;
  95. }
  96. #fh5co-offcanvas .fh5co-offcanvas-close:before {
  97.   font-family: 'icomoon';
  98.   speak: none;
  99.   font-style: normal;
  100.   font-weight: normal;
  101.   font-variant: normal;
  102.   text-transform: none;
  103.   line-height: 1;
  104.   /* Better Font Rendering =========== */
  105.   -webkit-font-smoothing: antialiased;
  106.   -moz-osx-font-smoothing: grayscale;
  107.   content: "\e117";
  108.   font-size: 30px;
  109.   color: rgba(255, 255, 255, 0.5);
  110.   -webkit-transition: 0.5s;
  111.   -o-transition: 0.5s;
  112.   transition: 0.5s;
  113. }
  114. #fh5co-offcanvas .fh5co-offcanvas-close:hover:before {
  115.   color: white;
  116. }
  117. #fh5co-offcanvas nav ul {
  118.   padding: 0;
  119.   margin: 0;
  120. }
  121. #fh5co-offcanvas nav ul li {
  122.   padding: 0;
  123.   margin: 0;
  124.   list-style: none;
  125. }
  126. #fh5co-offcanvas nav ul li a {
  127.   display: block;
  128.   color: rgba(255, 255, 255, 0.5);
  129.   padding: 7px 0;
  130. }
  131. #fh5co-offcanvas nav ul li a:hover {
  132.   color: #6BB6E6;
  133. }
  134. #fh5co-offcanvas nav ul li.active a {
  135.   color: #6BB6E6;
  136. }
  137. .offcanvas-visible #fh5co-offcanvas {
  138.   -moz-transform: translateX(0px);
  139.   -webkit-transform: translateX(0px);
  140.   -ms-transform: translateX(0px);
  141.   -o-transform: translateX(0px);
  142.   transform: translateX(0px);
  143. }
  144.  
  145. #fh5co-portfolio,
  146. #fh5co-about,
  147. #fh5co-contact,
  148. #fh5co-testimony,
  149. #fh5co-content {
  150.   padding: 7em 0;
  151. }
  152. @media screen and (max-width: 768px) {
  153.   #fh5co-portfolio,
  154.   #fh5co-about,
  155.   #fh5co-contact,
  156.   #fh5co-testimony,
  157.   #fh5co-content {
  158.     padding: 4em 0;
  159.   }
  160. }