forked from rebillar/site-accueil-insa
adaptation pour petits écrans
This commit is contained in:
parent
b6536ce199
commit
312598ea1b
1 changed files with 24 additions and 14 deletions
|
@ -24,19 +24,7 @@
|
|||
bottom: 5vh;
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
/* Add styles for smartphones screens */
|
||||
#menu ul {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#menu li {
|
||||
margin: 0 10px;
|
||||
|
@ -56,11 +44,33 @@ margin: 0 10px;
|
|||
}
|
||||
|
||||
#menu a:hover{
|
||||
color: #c22828;
|
||||
color: #e01111;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Add styles for smartphones screens */
|
||||
@media all and (max-width: 800px) {
|
||||
.menu {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
z-index: 2;
|
||||
overflow: visible;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
#menu ul {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: block;
|
||||
|
|
Loading…
Reference in a new issue