Witam. Pierwszy raz robię hamburger menu i mam problem z linkami. W wersji mobilnej mam chowane menu , które pokazuje się po kliknięciu. To działa, ale linki w tym menu są nieklikalne, jak spróbuję w nie kliknąć to menu znika. Pokapowałem się jak ustawiłem, że home ma nas przenieść na dół(tak żeby sprawdzić czy działa)
Czy struktura HTML do tego menu jest w ogóle dobra? Zwykłe rozwijane menu zrobię, ale takie "podmieniane" przy mniejszej rozdzielczości już nie :(. Nie mam pojęcia co powoduje, że te linki nie działają.
PS: Robiłem to na wzór mobilnego menu z tej stronki http://thenetninja.co.uk/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strona</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Taviraj" rel="stylesheet">
</head>
<body>
<nav>
<img class="logo" src="images/logo.svg" alt="Logo">
<a class="burger-menu" href="#">
<span>MENU</span>
<img src="images/hamburger.svg" alt="MENU">
</a>
<ul class="main-nav clearfix">
<li><a href="#bot" class="menu-item">Home</a></li>
<li><a href="#" class="menu-item">About</a></li>
<li> <a href="#" class="menu-item">Work</a></li>
<li><a href="#" class="menu-item">Contact</a></li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero fugiat cum doloremque neque ducimus laudantium qui maiores, accusantium, magni obcaecati, nesciunt aliquid et facilis exercitationem tenetur inventore facere. Inventore animi modi reiciendis a saepe odio dolores quos minus ut officia dolorem labore esse laudantium, provident deleniti quaerat iure non? Magnam facilis deserunt culpa libero velit rerum repudiandae minima quia consequatur itaque omnis molestiae, provident, architecto, odio atque. Quos deleniti praesentium alias iure vero corporis et soluta dicta, saepe eligendi fugiat laudantium magni accusantium, quod, fuga quis autem laboriosam beatae tenetur. Adipisci amet ipsum nulla dolor recusandae delectus maxime aut necessitatibus repudiandae tempore asperiores animi, facere eaque cupiditate fugit voluptatum a, odit eius, dicta voluptas corporis ab! Ipsam quis, est tenetur corporis deserunt mollitia enim. Eligendi repellendus alias deleniti beatae at quam blanditiis, error ipsum hic ipsa placeat minima impedit amet maxime fugiat ducimus! Nesciunt voluptates distinctio corporis porro iure cupiditate, itaque debitis, quis veritatis tenetur incidunt nostrum facere, dolorem expedita consectetur deserunt deleniti sint sed consequuntur eaque hic quibusdam quasi fuga tempora. Vitae officiis dolorem minima laborum consequatur asperiores at rem nulla ab illum voluptatem sint maiores ea ex illo totam, voluptatum deleniti repellat excepturi blanditiis, beatae dignissimos tempore repudiandae. Provident unde voluptatum qui? Neque accusamus sequi enim nobis iste, facere molestiae magni quae rerum commodi laudantium temporibus placeat nihil autem cumque doloremque dicta quaerat quidem ab. Dolorem minus consectetur quibusdam velit, consequatur optio molestiae soluta porro, enim ut impedit repellat quisquam sint sunt, expedita cupiditate. Voluptatum, assumenda. Odit eos, voluptas quaerat! Impedit nisi dolorum consectetur officiis magnam debitis pariatur est, hic fugit quisquam deleniti, perspiciatis distinctio explicabo aliquid enim eum natus quasi voluptatem laboriosam veritatis sint dolores voluptatibus nihil molestias. Est sunt unde, nostrum blanditiis, vero natus, laboriosam praesentium optio quidem aperiam ducimus nisi harum dolorem velit autem eum! Natus tempore ad assumenda quos quaerat distinctio placeat, provident fuga, laudantium reiciendis molestiae culpa fugit totam, atque temporibus libero tempora laboriosam voluptatibus quod consectetur omnis facilis? Sit quos optio similique accusamus, labore necessitatibus totam obcaecati distinctio, cumque quod quaerat. Ducimus aspernatur accusamus animi, maxime autem eum, ad consectetur aperiam quae cum deserunt fugiat illum nemo repellendus. Ut vero modi in sint ea deserunt ullam ipsam, aliquam tempora cumque possimus, expedita iusto
<h2 id="bot"></h2>
</body>
</html>
body,h1{
margin: 0;
padding: 0;
}
body{
font-family: 'Trirong', serif;
}
h1, h2, h3, h4, nav{
font-family: 'Open Sans', sans-serif;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
nav{
width: 100%;
background: #222;
}
.logo{
float: left;
height: 70px;
padding: 15px 50px 15px 120px;
background: #222;
}
.main-nav{
padding-right: 80px;
}
.main-nav > li{
float: right;
}
.main-nav a{
display: block;
padding: 15px 20px;
color: #ccc;
line-height: 70px;
}
.main-nav a:hover{
background: #444;
}
.burger-menu{
display: none;
color: #ccc;
background: #272727;
text-align: left;
line-height: 30px;
width: 100%;
}
.burger-menu span{
padding-left: 15px;
}
.burger-menu img{
height: 30px;
float: right;
padding-right: 15px;
}
.clearfix:after{
content:'';
display:block;
clear:right;
}
@media screen and (max-width: 670px){
nav{
text-align:center;
}
.logo{
float: none;
padding: 0;
margin: 0 auto
}
.burger-menu{
display: block;
}
.burger-menu:hover{
background: #333;
}
.main-nav{
float: none;
background: #272727;
padding: 0;
display: none;
}
.burger-menu:focus ~ .main-nav{
display: block;
}
.main-nav li{
float: none;
}
.main-nav a{
line-height: 30px;
font-size: 0.9rem;
}
}
Edit. Navbar przed użyciem display: none działa
, a po ukryciu i ponownym wyświetleniu już nie.
