İnternetten bulduğum bir menüyü biraz düzenlemeler ve ekleme çıkarmalar ile hallettim. Fakat şöyle bir sıkıntım var. Masaüstünde menü görünüyor fakat mobilde görünmüyor. Mobil'de görünmesi için ne yapmam gerekiyor? Nerede hata yapıyorum?
Masaüstünde böyle:
Mobil'de de Arama kısmıyla slider arasında çıkması gerekiyor fakat görünmüyor
CSS
$yellow: #f4d03f;
$blue: #16a085;
$gradient-bg: linear-gradient(90deg, $blue, $yellow);
$transparent-gray: rgba(0, 0, 0, 0.3);
$transparent-white: rgba(255, 255, 255, 0.15);
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu {
ol {
list-style: none;
padding: 0;
margin: 0;
&:first-child {
width: 100%;
max-width: 960px;
margin: 1rem auto 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
box-shadow: 0px 3px 8px $transparent-gray;
}
}
&-item {
display: flex;
align-items: center;
justify-content: center;
border-top: 2px solid $blue;
position: relative;
transition: background 0.3s ease-in-out;
&:nth-child(1) > a::before {
}
&:nth-child(2) > a::before {
}
&:nth-child(3) > a::before {
}
&:nth-child(4) > a::before {
}
&:nth-child(5) > a::before {
}
@for $i from 1 through 5 {
&:nth-child(#{$i}) > a::before {
font-family: "Font Awesome 5 Free";
font-size: 20px;
display: block;
margin-bottom: 0rem;
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: $blue;
@media (min-width: 768px) {
font-size: 1.5rem;
}
}
}
.sub-menu > a {
color: red;
}
&:not(:last-child) {
border-right: 1px solid $transparent-white;
}
.sub-menu {
position: absolute;
top: 100%;
width: 100%;
transform-origin: top;
transform: rotateX(-90deg);
transition: transform 0.3s linear;
background-color: $yellow;
z-index:999;
.menu-item {
border-color: $transparent-white;
a::before {
content: "";
}
&:first-child {
border: 0;
}
}
}
&:hover,
&.active {
border-top: 2px solid $yellow;
background-color: $transparent-white;
a::before {
color: white;
}
}
&:hover .sub-menu {
transform: rotateX(0deg);
}
a {
font-size: 4px;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
height: 100%;
width: 100%;
padding: 1.5em 1em;
@media (min-width: 768px) {
font-size: 1rem;
}
}
}
}
h2 {
display: block;
font-size: 2em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}HTML<nav class="menu"> <ol> <li class="menu-item"><a href="#0"><img border="0" src=" /dosya/cat1.png" width="40" height="40"><h2>Kedi</h2></a></li> <li class="menu-item"><a href="#0"><img border="0" src=" /dosya/labrador-retriever.png" width="40" height="40"><h2>Köpek</h2></a></li> <li class="menu-item"> <a href="#0"><img border="0" src=" /dosya/cat1.png" width="40" height="40"><h2>Kuş</h2></a> <ol class="sub-menu"> <li class="menu-item"><a href="#0">1</a></li> <li class="menu-item"><a href="#0">2</a></li> <li class="menu-item"><a href="#0">3</a></li> </ol> </li> <li class="menu-item"> <a href="#0"><img border="0" src=" /dosya/cat1.png" width="40" height="40"><h2>Balık</h2></a> <ol class="sub-menu"> <li class="menu-item"><a href="#0">1</a></li> <li class="menu-item"><a href="#0">2</a></li> <li class="menu-item"><a href="#0">3</a></li> </ol> </li> </ol> </nav>
