[pabloAntonio]

#it #webdev #pytaniedoeksperta #css

Mógłby ktoś podpowiedzieć dlaczego responsywne menu po kliknięciu na desktopie się rozwija, a na telefonie już nie?

index

Design

* Strona główna
* O nas
* Partnerzy
* FAQ
* Kontakt

css

@import '[https://fonts.googleapis.com/css?family=Alegreya+Sans';](https://fonts.googleapis.com/css?family=Alegreya+Sans';)
* {
 margin: 0;
 padding: 0;
 border: 0;
}
body {
 background: #f5f5f5;
 color: #67727a;
 font-family: 'Alegreya', sans-serif;
}

header {
 background-color: #6991ac;
 width: 100%;
 height: 86px;
}

/*nawigacja*/
nav {
 text-align:left;
 padding: 1.5em 1.5em 1.5em 1.5em;
}
#menu-icon {
 display: hidden;
 width: 40px;
 height: 40px;
 background: url(nav.png) center;
}
a:hover#menu-icon {
 border-radius: 4px 4px 0 0;
 text-align:center;
}
ul {
 list-style-type: none;
}
nav ul li {
 font-family: 'Alegreya Sans', sans-serif;
 font-size: 150%;
 display: inline-block;
 /* float: left; */
 padding: 10px;
}
nav ul li a {
 color: #f5f5f5;
 text-decoration: none;
}
nav ul li a:hover {
 color: #c3d7df;
}
.current {
 color: #c3d7df;
}
/*koniec nawigacji*/

/*MEDIA QUERIES*/
@media screen and (max-width:768px) {
 h2 {
 font-size: 150%;
 }
 h3 {
 font-size: 125%;
 }
 p {
 font-size: 120%;
 }
 header {
 position: absolute;
 }
 #logo {
 margin: 15px 0 20 -25px;
 background: url(RD_mobile.png) no-repeat center;
 }
 #menu-icon {
 display: inline-block;
 }
 nav ul, nav:active {
 display: none; 
 z-index: 1000;
 position: absolute;
 padding: 20px;
 background-color: #6991ac;
 right: 20px;
 top:60px;
 border: 3px solid #fff;
 border-radius: 10px 0 10px 10px;

 }
 nav:hover ul {
 display: block;
 }
 nav li {
 text-align: center;
 width: 100%;
 padding: 10px 0;
 }
 .banner {
 padding-top: 86px;
 }
 .one-fourth {
 float: left;
 width: 100%;
 }
 .one-fourth i {
 font-size: 350%;
 padding: 4% 0 1% 0;
 }
 article {
 width: 100%;
 }
 aside {
 float: left;
 width: 100%;
 }
 .hand-mobile {
 display: none;
 }
 .one-third {
 width: 100%;
 }
 .social i {
 font-size: 180%;
 }
}

[Rst00]

@pabloAntonio: wklej to na codepen'a i podaj linka bo nikt tutaj nie będzie się bawić w ręczne kopiowanie

[ese89]

@pabloAntonio a bez media queries max 768 est różnica jakaś w działaniu?

[pabloAntonio]

@Rst00: https://codepen.io/antoniopablo/pen/VrGRZw
@ese89: no jest bo przy zmniejszaniu szerokości (czyli w telefonie, albo zmniejszając szerokość przeglądarki na laptopie) elementy będą się rozjeżdżały, a ikona nav się nie pojawi

[pabloAntonio]

@Rst00: może chodzi o ten :active powinno być coś w stylu onclick? Nie znam się na webdevie ;)

[ese89]

wg chodzi o to że na desktopie hover działa poprawnie na telefonie dotknięcie to klik ktory działa na href i odświeża stronę. Usuń atrybut href

[trisopl]

@pabloAntonio: zaraz zaraz, a gdzie ty tu masz obsłużone kliknięcie? W CSS nie ma takiego zdarzenia, to menu ci się pojawia po najechaniu myszką:

nav:hover ul {
display: block;
}

Musisz dać javascriptowy onclick

[pabloAntonio]

@trisopl: zajebisty ten css nie ma co. Właśnie wyczytałem, że tam muszę zrobić checkboxa.