Agregarle otro botón a esta a navegación

[ceaped]

Buenas tardes

Deseo implementar esta navegación:

https://codyhouse.co/demo/expandable...ion/index.html

Ella cuenta con 4 Project, si le agergo una más se monta sobre la primera.

¿Cómo hago para aumentarle otro botón?

Gracias por su ayuda

[baldaweb]

Tendrás que modificar el css.

Añadir entre otras cosas el nuevo elemento que será el 5:

Código CSS:

@media only screen and (min-width: 1024px)
.projects-container li:nth-of-type(5) {
    top: 0;
    left: 80vw;
}
 

[ceaped]

Hola baldaweb
Excelente me funcionó.
Es de esta manera:

Código CSS:

.projects-container .cd-single-project:nth-of-type(5) {
  top: 80vh;
}
.projects-container .cd-single-project:nth-of-type(5)::after {
  background-image: url("../img/img-5-small.jpg");
}
.projects-container .cd-single-project:nth-of-type(5)::before {
  content: 'img/img-5-small.jpg';
}
 

Otra pregunta:
Cuando el navegador sobrepasa los 1024 de ancho no se ven las imágenes de home.
¿Cómo hago para que se visualicen?

Gracias por tu ayuda

[baldaweb]

Eso pasa cuando es mayor que 1170, pon opacity a 1, antes estaba a 0.

Código CSS:

@media only screen and (min-width: 1170px)
.projects-container li.is-loaded::after {
    opacity: 1;
}
 

Debes ir toqueteando el css para estas cosas.

Saludos.

[ceaped]

Hola baldaweb
Excelente...;)

Es en esta línea que se cambia "opacity de 0 a 1":

Código CSS:

.projects-container .cd-single-project.is-loaded::after {
    opacity: 1;
  }
 

Gracias por tu ayuda

[ceaped]

Hola baldaweb
Otra pregunta:

¿Cómo hago para cuando presione el botón (zona activa del home), el título se suba y no quede en el centro?

Gracias por tu ayuda

[baldaweb]

Cambiando el top a 10 a este estilo por ejemplo:

Código CSS:

.is-full-width .cd-title {
    top: 10vh;
    -webkit-transition: opacity 0s, top 0.4s;
    -moz-transition: opacity 0s, top 0.4s;
    transition: opacity 0s, top 0.4s;
}
 

[ceaped]

Hola baldaweb

Trato de agregarle texto a la flecha que me indica que de clic para bajar pero no se visualiza el texto:

Así lo pse

Código CSS:

@media only screen and (min-width: 1170px) {
  .projects-container .cd-scroll {
    font-family: "Merriweather", serif;
    font-size: 2rem;
    font-style: italic;
    font-weight: bold;
    color: #FFFFFF;
    width: 300px;
    position: absolute;
    background-color: #FF0000;
    content: "Texto... ";
    
    background-image: url("../images/cd-icon-arrow-desktop.svg");
  }
}
 

¿Es ahí donde se agrega el texto, o es en otro lado?

Gracias por tu ayuda