Блог

Привет! Недавно я создавал портфолио веб — сайтов и составил меню бургеров!

Во время создания меню бургеров у меня были проблемы с размещением логотипа и значков социальных сетей над и под ссылками на href.

Вот несколько изображений, чтобы понять, как это выглядит —

Навигационная панель (полная) :

Навигационная панель (бургер до) :

навигационная панель (бургер после) :

Навигационная панель (ПРИМЕР бургера после) :

I understand that this is happening because they are all located inside nav.

How can I modify it to have the logo above the text, and the icons below the text. I tried going around trying JS to add style to logo and icons but it seems to not work. Also changing the css in the media query (to when the burger pops up) can mess up the look «before» the burger is pressed.

html code —

 <div class="logo"><a href="index.html"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></a></div>
            <div class="openMenu"><i class="fa fa-bars" style="color:black;"></i></div>
            <ul class="mainMenu">
                <!-- Center-aligned links -->
                <div class="nav-center">
                    <div class="navLogo"><a href="index.html"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></a></div>
                </div>
                <!-- Left-aligned links -->
                <li><a href="contact.html" class="leftLinks">Contact</a></li>
                <li><a href="about.html" class="leftLinks">About</a></li>
                <li><a href="https://twins-merch-5.creator-spring.com/" target="_blank" class="leftLinks">Store</a></li>
                <div class="closeMenu"><i class="fa fa-times"></i></div>
                <!-- Right-aligned links -->
                <div class="nav-right">
                    <span class="icons">
                        <a href="https://www.youtube.com/c/TwinPlayz_YT/?sub_confirmation=1" target="_blank"><i class="fab fa-youtube"></i></a>
                        <a href="https://www.instagram.com/yt.twinplayz" target="_blank"><i class="fab fa-instagram"></i></a>
                        <a href="https://twitter.com/TwinPlayz_YT" target="_blank"><i class="fab fa-twitter"></i></a>
                        <a href="https://github.com/ConstantineLinardakis" target="_blank"><i class="fab fa-github"></i></a>
                    </span>
                </div>
            </ul>
        </nav>
 

css code —

 /* Fourth Media Querie */

@media(max-width: 805px){
    nav .logo{
        margin: 6px;
        font-size: 25px;
        cursor: pointer;
        display:inherit;
    }

    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: -100%;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: white;
        transition: top 1s ease;
        display: flex;
    }

    nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        color:black;
    }

    nav .openMenu {
        display: block;
    }

    nav .mainMenu li a {
        background: none;
        font-size: 2rem;
    }

    nav .mainMenu li a:hover {
        background: none;
        color: rgb(0, 110, 255);
        font-size: 2.5rem;
        transition: ease all .5s;
    }

    .icons i {
        display: inline-block;
        padding: 12px;
        color:rgb(0, 0, 0);
    }

    footer .contact .holder .info{
        font-size:0.8rem;
    }

}

 

код js —

 const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');

openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);

function show(){
    mainMenu.style.display = 'flex';
    mainMenu.style.top = '0';
}

function close(){
    mainMenu.style.top = '-100%';
}