Ciao a tutti, sono nuova e avrei un problemino con il mio sito web.
Dovrei rendere cliccabili dei link, ma non so come fare...ho provato a dare lo z-index al menù, ma mi sovrappone le immagini e il menù va dietro.
Vi faccio vedere il CSS e vi ringrazio già in anticipo se riuscite a darmi una mano.
<!-- MENU -->
#menu{
position:fixed;
padding-top:6em;
text-align:center;
background-color:rgba(0,0,0,0.5);
min-width:100%;
min-height:100%;
}
#menu li a{
list-style:none outside none;
line-height:3em;
position:relative;
text-decoration:none;
color:#ea148c;
font-size:1.5em;
}
#menu li a:hover{
text-decoration:underline;
}
#menu ul{
padding:0;
}
#hamburger{
position:fixed;
left:1em;
top:1.55em;
}
/* HOME */
#sfondo{
background-image:url(../img/sfondo_.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100%;
height:100%;
}
<!-- WORKS -->
#works{
margin-top:9em;
}
.works_testo{
margin-top:6em;
font-weight:bold;
font-size:24px;
text-align:center;
}
.grid-25{
padding:0;
margin:0 auto;
}
.grid-container{
padding:0;
}
<!-- PORTFOLIO -->
#portfolio{
width:100%;
height:100%;
}
#lavori{
text-align:center;
}
.titolo_lavoro{
color:#ea148c;
text-align:center;
margin-top:3em;
font-size:2.5em;
margin-bottom:0.7em;
}
.desc_lavoro{
text-align:center;
margin-top:0.5em;
color:black;
margin-bottom:1em;
line-height:2.5em;
}
.vodka{
margin-bottom:2em;
}
<!-- CONTACTS -->
#contatti{
text-align:center;
}
.contact_me{
margin-top:6em;
font-size:24px;
font-weight:bold;
text-align:center;
}
.find_me{
margin-bottom:3em;
text-align:center;
}
.indirizzo{
text-align:center;
line-height:3em;
margin-bottom:4em;
}
.email{
text-align:center;
margin-bottom:1em;
}
#icone{
text-align:center;
margin-bottom:4em;
}
#icone img{
text-align:center;
margin-left:1em;
margin-right:1em;
display:inline-block;
}
a{
text-decoration:none;
}
/* da 1200px in su */
@media only screen and (min-width: 1200px) {
/* MENU*/
#menu{
padding:0;
list-style-type:none;
word-spacing:1em;
background-color:transparent;
min-height:100%;
min-width:100%;
}
#menu li a{
list-style:none outside none;
text-decoration:none;
color:#ea148c;
font-size:1em;
}
#menu li a:hover{
text-decoration:underline;
}
#menu ul{
width:400px;
padding:0;
margin-left:2em;
display:block;
list-style-type:none;
}
#menu li{
display:inline-block;
}
}