0

estoy aprendiendo css y tengo un problema con mi proyeccto usando guias cree un navbar responsinve pero en algunas partes no se superpone a div o formularios cuando se ve en responsive. En mi pantalla principal cuando se deberia desplegar el navbar se queda por detrás de una imagen y no se puede usar y cuando intento desplegar en modo responsive en un formulario muestra lo demas pero no se superpone a un custom-file-label.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  outline: none;
  list-style: none;
  text-decoration: none;
  scroll-beaviour: smooth;

}

.main-container {
  position: relative;
}


.banner-img {
  background: url(../img/learning2.jpg) no-repeat top center;
  background-size: cover;

  width: auto;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-content {
  text-align: center;
  color: #fff;
}
<div class="main-container">
    <div class="banner-img">
        <div class="banner-content">
            <h2 class="title">Alfabetizacion <span>Digital</span></h2>
        </div>
    </div>
 </div>

Ademas quisiera que siempre el navbar se superponga a cualquier elemento en la pagina

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {
  display: none;
}

.nav > .nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav > .nav-links > a:hover {
  background-color:#eee;
  color: #333;
}

.nav > #nav-check {
  display: none;
}

@media (max-width:600px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}
<header>


    <div class="nav">
  <input type="checkbox" id="nav-check">
  <div class="nav-header">
    <div class="nav-title">
     TeEnseño
    </div>
  </div>
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  
  <div class="nav-links">

    <a href="<?php echo base_url();?>/Portada">Inicio</a>
    <a href="<?php echo base_url();?>/Blog">Blog</a>
    <a href="<?php echo base_url();?>/Register">Registro</a>
    <a href="<?php echo base_url();?>/Post">Post</a>
    <a href="<?php echo base_url();?>/Login" >Login</a>
    
  </div>
</div>


    </header>

Se los agradecería muchísimo.

1 respuesta 1

0

Puedes usar z-index para poner el navbar adelante de la imagen.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  outline: none;
  list-style: none;
  text-decoration: none;
  scroll-beaviour: smooth;
}

.main-container {
  position: relative;
}

.banner-img {
  background: url(https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg) no-repeat top center;
  background-size: cover;
  width: auto;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-content {
  text-align: center;
  color: #fff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: "segoe ui";
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

.nav>.nav-header {
  display: inline;
}

.nav>.nav-header>.nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav>.nav-btn {
  display: none;
}

.nav>.nav-links {
  z-index: 1;
  display: inline;
  float: right;
  font-size: 18px;
}

.nav>.nav-links>a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav>.nav-links>a:hover {
  background-color: #eee;
  color: #333;
}

.nav>#nav-check {
  display: none;
}

@media (max-width: 600px) {
  .nav>.nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav>.nav-btn>label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav>.nav-btn>label:hover,
  .nav #nav-check:checked~.nav-btn>label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav>.nav-btn>label>span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav>.nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav>.nav-links>a {
    display: block;
    width: 100%;
  }
  .nav>#nav-check:not(:checked)~.nav-links {
    height: 0px;
  }
  .nav>#nav-check:checked~.nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}
<header>

  <div class="nav">
    <input type="checkbox" id="nav-check">
    <div class="nav-header">
      <div class="nav-title">
        TeEnseño
      </div>
    </div>
    <div class="nav-btn">
      <label for="nav-check">
        <span></span>
        <span></span>
        <span></span>
      </label>
    </div>

    <div class="nav-links">

      <a href="<?php echo base_url();?>/Portada">Inicio</a>
      <a href="<?php echo base_url();?>/Blog">Blog</a>
      <a href="<?php echo base_url();?>/Register">Registro</a>
      <a href="<?php echo base_url();?>/Post">Post</a>
      <a href="<?php echo base_url();?>/Login">Login</a>

    </div>
  </div>

</header>

<div class="main-container">
  <div class="banner-img">
    <div class="banner-content">
      <h2 class="title">Alfabetizacion <span>Digital</span></h2>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.