Una consulta! haber si me pueden ayudar.
Estoy trabajando en un proyecto de una página web sencilla (soy junior aun :D). En el Index para visualizar en pc cada uno de los elementos del menu llevan a una seccion especifica de la pagina (eso funciona perfectamente).
Sin embargo a la hora de querer trabajar con media query para tratar de hacer responsive la web con pantallas mas pequeñas -tablets/celulares- agregue un icono Bars para que aloje los elementos del menu y los muestre al hacer clic.
Sin embargo no se como hacer para que cuando despliega la lista en responsive me redireccione a las mismas secciones (por que simplemente no me redirecciona por arte de magia) como cuando esta en pantalla normal -PCs-.
Les comparto el codigo que he avanzado del media query.
Espero me haya explicado bien. Saludos!
@media screen and (max-width: 768px) {
p {
font-size: 130%;
}
h3 {
font-size: 150%;
}
header {
height: 80px;
position: relative;
}
header #logo {
margin: 15px 0 20px -25px;
}
#menu-icon {
display: inline-block;
}
nav:hover ul {
display: block;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #f5f5f5;
border: 1px solid #a5bdcd;
right: 20px;
width: 25%;
opacity: .90;
}
nav li {
text-align: center;
width: 100%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bahá'ís de Nicaragua</title>
<!--Iconos FontAwesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Slider Jquery BxSlider-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="banner-wrapper">
<header>
<div href="#" id="header-inner">
<a href="index.html" id="logo">
<img src="img/pics/estrella3.jpg" alt="Logo Bahá'í">
</a>
<nav>
<a href="#" id="menu-icon">
<i class="fa fa-bars "></i>
</a>
<ul href="#" id="menu-lista">
<li>
<a href="index.html" class="current">INICIO</a>
</li>
<li>
<a href="#skills">HABILIDADES</a>
</li>
<li>
<a href="#portfolio">PORTAFOLIO</a>
</li>
<li>
<a href="#services">SERVICIOS</a>
</li>
<li>
<a href="#contact">CONTACTO</a>
</li>
</ul>
</nav>
</div>
</header>
</div>