Trying to center hamburger menu in content box

user_19505206 0
Viewed 43

Hamburger Menu

As shown above, my hamburger menu is stuck in the top left of its container. I'm trying to get it centered with the rest of the header content. Right now this is the code I have...

HTML

<header>

    <ul class="main-menu-ls">
        <li class="main-menu-ls main-logo">
            <a class="logo-link" href="artsol.HTML"></a>
        </li>

        <li class="main-menu-ls search-wrapper">
            <form class="main-search" action="/search">
                <input class="main-search-bar-input" type="search" name="q" placeholder="Search:" value=""
                    autocapitalize="off" autocomplete="off">
            </form>
        </li>

        <li class="main-menu-ls cart-link-container">
            <a class="cart-link" href="cart.html"></a>
        </li>

        <li class="main-menu-ls wallet-btn-container">
            <button onclick="togglePopupWallet()" class="wallet-btn">Wallet</button>
        </li>

        <li class="main-menu-ls login-btn-container">
            <button onclick="togglePopupLogin()" class="login-btn">Login</button>
        </li>

        <li class="h-menu-container" id="h-menu-container">
            <input class="main-menu-ls menu-checkbox" type="checkbox" id="menu_checkbox">
            <label class="h-menu-btn" for="menu_checkbox">
                <div></div>
                <div></div>
                <div></div>
            </label>
        </li>
    </ul>

CSS

.main-menu-ls {
height: 48px;
margin: 0;
padding: 0;
width: 100%;
border: 0;
border-bottom: 1px solid #443E7A;
display: inline-flex;
text-align: center;
align-items: center;
justify-content: center;
list-style: none;
}

.h-menu-container {
margin: 0 auto;
position: relative;
text-align: center;
display: inline-flex;
width: var(--main-menu-height);
height: var(--main-menu-height);
align-items: center;
}

.h-menu-btn {
justify-content: center;
align-items: center;
text-align: center;
}

#menu_checkbox {
display: none;
}

label {
display: inline-block;
position: relative;
align-items: center;
justify-content: center;
/* top: 75%; */
/* right: 0;
left: 0; */
margin: 0 auto;
width: var(--main-menu-height);
height: var(--main-menu-height);
/* transform: translateY(-50%); */
transition: 0.3s ease transform, 0.3s 
ease background-color;
cursor: pointer;
}

What I want to happen is to have the hamburger menu toggle centered in the container and when I toggle it'll do a little animation where it turns into a horizontal ellipse in the same position while changing the parent containers background color to match the menu that will be added. Although I can't continue until I find out how to center the divs that create the menu.

web-deployment css html
1 Answers

There are three ways to center a child in a div(parent).

 /* Using FlexBox */
        .parent {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        /* Using Grid Layout */

        .parent2 {
            display: grid;
            place-content: center;
            width: 100px;
            height: 100px;
            background-color: rgb(112, 172, 132);
        }

        /* Giving the parent position relative and making the child postion absoulute */

        .parent3 {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: rgb(88, 20, 165);
        }
        

        .parent3 h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%);
        }
<div class="parent">
        <h1>ABC</h1>
    </div>
    <div class="parent2">
        <h1>ABC</h1>
    </div>
    <div class="parent3">
        <h1>ABC</h1>
    </div>

user_193658210
Related