Odnośnie wcześniejszego tematu dotyczącego menu mobilnego. Postanowiłem to przepisać od nowa, pisząc po swojemu. Ale zawsze utknę na tym samym problemie. Otóż, może najpierw kod
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
nav { background: #000; position: absolute; left: 0; top: 0; width: 100%; color: #fff; }
nav ul { list-style:none; text-align:center;}
nav li { display:inline; }
nav .button-menu { display:none; }
@media (max-width: 800px) {
nav li { display:block; }
nav .button-menu { color:#fff; }
}
</style>
<script>
</script>
</head>
<body>
<nav>
<ul>
<a class="button-menu">MENU</a>
<li>Home</li>
<li>O mnie </li>
<li>Usługi</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
</body>
</html>
Efekt:
https://jsfiddle.net/5ao1utdo/
Po oddaleniu strony widać menu w wersji nie mobilnej. I tu mam pytanie.
Chcę, żeby:
<a class="button-menu">MENU</a>
widoczne było tylko dla strony mobilnej. Zatem utworzyłem taki kod jak powyżej. Dlaczego gdy:
w "zwykłej" wersji ustawiam:
nav .button-menu { display:none; }
oraz w wersji mobilnej:
nav .button-menu { color: #fff }
to ten div button-menu NIE WYŚWIETLA się w żadnej wersji strony. Może mi to ktoś wytłumaczyć, bo męczę się z tym już kilka godzin. Proszę o podpowiedź w tej sprawie.