Arkadaşlar merhaba,

İ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>