OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Full Width Mega Menu not working when I add width:100%

  • Thread starter Thread starter Karansxa
  • Start date Start date
K

Karansxa

Guest
Hi I am trying to design an Header with Mega Menu using HTML and custom CSS. I tried to set mega menu to full width by applying width:100% to it but doesn't work.

This is my HTML code

Code:
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IT Company</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style/header.css">
</head>
<body>
    <header class="container">
        <nav class="navbar" id="navbar">
            <div class="navbar-container">
                <div class="menu-icon" id="menu-icon">
                    <button class="menu" onclick="toggleDrawer()" aria-label="Main Menu">
                        <svg width="40" height="40" viewBox="0 0 100 100">
                            <path class="line line1"
                                d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
                            <path class="line line2" d="M 20,50 H 80" />
                            <path class="line line3"
                                d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
                        </svg>
                    </button>
                </div>
                <div class="logo">
                    <img src="solvejet.svg" alt="IT Company Logo">
                </div>
                <div class="contact-icon">
                    <a href="#" class="contact-button">
                        <i class="ri-send-plane-fill"></i>
                    </a>
                </div>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link">Services</a>
                    <div class="mega-menu">
                        <div class="mega-menu-content">
                            <div class="mega-menu-section">
                                <h3>Web Development</h3>
                                <ul>
                                    <li><a href="#">Front-end</a></li>
                                    <li><a href="#">Back-end</a></li>
                                    <li><a href="#">Full-stack</a></li>
                                </ul>
                            </div>
                            <div class="mega-menu-section">
                                <h3>Mobile Development</h3>
                                <ul>
                                    <li><a href="#">iOS</a></li>
                                    <li><a href="#">Android</a></li>
                                    <li><a href="#">Cross-platform</a></li>
                                </ul>
                            </div>
                            <div class="mega-menu-section">
                                <h3>Cloud Services</h3>
                                <ul>
                                    <li><a href="#">AWS</a></li>
                                    <li><a href="#">Azure</a></li>
                                    <li><a href="#">Google Cloud</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Technology</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Hire</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Work</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <a href="#" class="cta-button">Let's Talk</a>
        </nav>
    </header>
    
    <div class="drawer" id="drawer">
        <div class="drawer-content">
            <ul>
                <li><a href="#" class="drawer-menu">About</a></li>
                <li><a href="#" class="drawer-menu">Services</a></li>
                <li><a href="#" class="drawer-menu">Industries</a></li>
                <li><a href="#" class="drawer-menu">Technology</a></li>
                <li><a href="#" class="drawer-menu">Hire</a></li>
                <li><a href="#" class="drawer-menu">Work</a></li>
            </ul>
            <a href="/contact-us" class="drawer-cta-button">Let's Talk</a>
        </div>
    </div>    
    <script src="js/header.js"></script>
</body>
</html>

and this is my CSS

Code:
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container {
    max-width: auto;
    margin: 0 auto;
}

header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navbar-container {
    padding-left: 2%;
    align-items: center;
    width: min-content;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 1rem 2rem;
    background: transparent;
    transition: background 0.3s ease;
    height: 80px;
}

.navbar.scrolled {
    background: rgba(255, 254, 254, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.logo img {
    height: 60px;
}

.nav-menu {
    position: relative;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-weight: 600;
    color: #252B33;
    text-decoration: none;
    padding: 0.75rem 1.2rem;
    display: block;
    text-align: center;
    min-width: 70px;
    transition: background 0.3s ease, color 0.3s ease;
    font-size: 1.05em;
}

.nav-link:hover,
.nav-link:focus {
    color: #0263E0;
}

.menu-icon {
    display: block;
    cursor: pointer;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.nav-item:hover .mega-menu {
    display: block;
    animation: cardDrop 0.5s forwards;
}

.dropdown:hover .mega-menu {
    display: block;
}

.mega-menu-content {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.mega-menu-section {
    flex: 1;
    padding: 20px;
}

.mega-menu-section h3 {
    margin-top: 0;
}

.mega-menu-section ul {
    list-style: none;
    padding: 0;
}

.mega-menu-section li {
    margin: 0.5rem 0;
}

.mega-menu-section a {
    color: #333;
    text-decoration: none;
}

.cta-button {
    background: #0263E0;
    color: #fff;
    padding: 1.05rem 2.0rem;
    border-radius: 10px;
    line-height: 14px;
    text-decoration: none;
    margin-left: 1rem;
    transition: background 0.3s ease;
    box-shadow: 0 20px 40px rgba(2, 99, 224, .15);
}

.cta-button:hover,
.cta-button:focus {
    background: #202c4a;
}

.drawer {
    position: fixed;
    top: 90px;
    left: -100%;
    width: 100%;
    height: calc(100% - 80px);
    background: rgba(255, 254, 254, 0.4);
    color: #252B33;
    z-index: 1001;
    transition: left 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.drawer.open {
    left: 0;
}

.drawer-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90%;
}

.drawer-content ul {
    list-style: none;
    padding: 0;
}

.contact-button {
    text-decoration: none;
    color: #0263E0;
}

.contact-icon {
    display: none;
    cursor: pointer;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.drawer-content li {
    margin: 1rem 0;
}

.drawer-content .drawer-menu {
    font-size: 32px;
    color: #252B33;
    text-decoration: none;
    font-weight: 600;
    text-align: left;
    align-items: left;
    line-height: normal;
    padding: 8px 15px;
}

.drawer-content .drawer-menu:hover,
.drawer-content .drawer-menu:focus {
    color: #ddd;
}

.drawer-cta-button {
    background: #0263E0;
    color: #fff;
    padding: 1.05rem 2.0rem;
    border-radius: 10px;
    line-height: 20px;
    text-decoration: none;
    transition: background 0.3s ease;
    text-align: center;
    margin-top: auto;
    /* Push the button to the bottom */

}

.drawer-cta-button:hover,
.drawer-cta-button:focus {
    background: #202c4a;
}


.menu {
    margin-right: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: none;
    padding: 0;
}

.line {
    fill: none;
    stroke: black;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}

.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}

.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

@media (max-width: 768px) {
    .navbar {
        margin-top: 10px;
    }

    .nav-menu {
        display: none;
    }

    .menu-icon {
        display: block;
    }

    .cta-button {
        display: none;
    }

    .menu {
        display: flex;
    }

    .menu-icon,
    .contact-icon {
        display: block;
    }

    .navbar-container {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
    }

    .contact-icon {
        display: block;
        margin-left: auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .navbar {
        margin-top: 10px;
    }

    .nav-menu {
        display: none;
    }

    .menu-icon {
        display: block;
    }

    .cta-button {
        display: none;
    }

    .menu {
        display: flex;
    }

    .menu-icon,
    .contact-icon {
        display: block;
    }

    .navbar-container {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
    }

    .contact-icon {
        display: block;
        margin-left: auto;
    }

    .mega-menu {
        left: 100%;
    }

    .mega-menu::before {
        left: 40%;
    }
    .drawer-content .drawer-menu {
        font-size: 48px;
        font-weight: 800;
    }
    .drawer-content
    {
        align-items: center;
    }
    .drawer-cta-button
    {
        width: 80%;
    }
}

@keyframes cardDrop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

I tried to give .mega-menu width:100% but it doesn't cover full width. I tried width:1920px I still doesn't shift to full width, Is there any other way to do it?
<p>Hi I am trying to design an Header with Mega Menu using HTML and custom CSS. I tried to set mega menu to full width by applying width:100% to it but doesn't work.</p>
<p>This is my HTML code</p>
<pre><code><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT Company</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style/header.css">
</head>
<body>
<header class="container">
<nav class="navbar" id="navbar">
<div class="navbar-container">
<div class="menu-icon" id="menu-icon">
<button class="menu" onclick="toggleDrawer()" aria-label="Main Menu">
<svg width="40" height="40" viewBox="0 0 100 100">
<path class="line line1"
d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3"
d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>
</button>
</div>
<div class="logo">
<img src="solvejet.svg" alt="IT Company Logo">
</div>
<div class="contact-icon">
<a href="#" class="contact-button">
<i class="ri-send-plane-fill"></i>
</a>
</div>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link">Services</a>
<div class="mega-menu">
<div class="mega-menu-content">
<div class="mega-menu-section">
<h3>Web Development</h3>
<ul>
<li><a href="#">Front-end</a></li>
<li><a href="#">Back-end</a></li>
<li><a href="#">Full-stack</a></li>
</ul>
</div>
<div class="mega-menu-section">
<h3>Mobile Development</h3>
<ul>
<li><a href="#">iOS</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Cross-platform</a></li>
</ul>
</div>
<div class="mega-menu-section">
<h3>Cloud Services</h3>
<ul>
<li><a href="#">AWS</a></li>
<li><a href="#">Azure</a></li>
<li><a href="#">Google Cloud</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Technology</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Hire</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Work</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<a href="#" class="cta-button">Let's Talk</a>
</nav>
</header>

<div class="drawer" id="drawer">
<div class="drawer-content">
<ul>
<li><a href="#" class="drawer-menu">About</a></li>
<li><a href="#" class="drawer-menu">Services</a></li>
<li><a href="#" class="drawer-menu">Industries</a></li>
<li><a href="#" class="drawer-menu">Technology</a></li>
<li><a href="#" class="drawer-menu">Hire</a></li>
<li><a href="#" class="drawer-menu">Work</a></li>
</ul>
<a href="/contact-us" class="drawer-cta-button">Let's Talk</a>
</div>
</div>
<script src="js/header.js"></script>
</body>
</html>
</code></pre>
<p>and this is my CSS</p>
<pre><code>body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.container {
max-width: auto;
margin: 0 auto;
}

header {
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
}

.navbar-container {
padding-left: 2%;
align-items: center;
width: min-content;
}

.navbar {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 1rem 2rem;
background: transparent;
transition: background 0.3s ease;
height: 80px;
}

.navbar.scrolled {
background: rgba(255, 254, 254, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.logo img {
height: 60px;
}

.nav-menu {
position: relative;
display: flex;
list-style: none;
margin: 0;
padding: 0;
flex: 1;
justify-content: center;
}

.nav-item {
position: relative;
}

.nav-link {
font-weight: 600;
color: #252B33;
text-decoration: none;
padding: 0.75rem 1.2rem;
display: block;
text-align: center;
min-width: 70px;
transition: background 0.3s ease, color 0.3s ease;
font-size: 1.05em;
}

.nav-link:hover,
.nav-link:focus {
color: #0263E0;
}

.menu-icon {
display: block;
cursor: pointer;
font-size: 24px;
transition: transform 0.3s ease;
}

.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.nav-item:hover .mega-menu {
display: block;
animation: cardDrop 0.5s forwards;
}

.dropdown:hover .mega-menu {
display: block;
}

.mega-menu-content {
display: flex;
justify-content: space-around;
padding: 20px;
}

.mega-menu-section {
flex: 1;
padding: 20px;
}

.mega-menu-section h3 {
margin-top: 0;
}

.mega-menu-section ul {
list-style: none;
padding: 0;
}

.mega-menu-section li {
margin: 0.5rem 0;
}

.mega-menu-section a {
color: #333;
text-decoration: none;
}

.cta-button {
background: #0263E0;
color: #fff;
padding: 1.05rem 2.0rem;
border-radius: 10px;
line-height: 14px;
text-decoration: none;
margin-left: 1rem;
transition: background 0.3s ease;
box-shadow: 0 20px 40px rgba(2, 99, 224, .15);
}

.cta-button:hover,
.cta-button:focus {
background: #202c4a;
}

.drawer {
position: fixed;
top: 90px;
left: -100%;
width: 100%;
height: calc(100% - 80px);
background: rgba(255, 254, 254, 0.4);
color: #252B33;
z-index: 1001;
transition: left 0.3s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.drawer.open {
left: 0;
}

.drawer-content {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 90%;
}

.drawer-content ul {
list-style: none;
padding: 0;
}

.contact-button {
text-decoration: none;
color: #0263E0;
}

.contact-icon {
display: none;
cursor: pointer;
font-size: 24px;
transition: transform 0.3s ease;
}

.drawer-content li {
margin: 1rem 0;
}

.drawer-content .drawer-menu {
font-size: 32px;
color: #252B33;
text-decoration: none;
font-weight: 600;
text-align: left;
align-items: left;
line-height: normal;
padding: 8px 15px;
}

.drawer-content .drawer-menu:hover,
.drawer-content .drawer-menu:focus {
color: #ddd;
}

.drawer-cta-button {
background: #0263E0;
color: #fff;
padding: 1.05rem 2.0rem;
border-radius: 10px;
line-height: 20px;
text-decoration: none;
transition: background 0.3s ease;
text-align: center;
margin-top: auto;
/* Push the button to the bottom */

}

.drawer-cta-button:hover,
.drawer-cta-button:focus {
background: #202c4a;
}


.menu {
margin-right: 20px;
background-color: transparent;
border: none;
cursor: pointer;
display: none;
padding: 0;
}

.line {
fill: none;
stroke: black;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
stroke-dasharray: 60 207;
stroke-width: 6;
}

.line2 {
stroke-dasharray: 60 60;
stroke-width: 6;
}

.line3 {
stroke-dasharray: 60 207;
stroke-width: 6;
}

.opened .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}

.opened .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6;
}

.opened .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}

@media (max-width: 768px) {
.navbar {
margin-top: 10px;
}

.nav-menu {
display: none;
}

.menu-icon {
display: block;
}

.cta-button {
display: none;
}

.menu {
display: flex;
}

.menu-icon,
.contact-icon {
display: block;
}

.navbar-container {
display: flex;
width: 100%;
justify-content: space-evenly;
}

.contact-icon {
display: block;
margin-left: auto;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
.navbar {
margin-top: 10px;
}

.nav-menu {
display: none;
}

.menu-icon {
display: block;
}

.cta-button {
display: none;
}

.menu {
display: flex;
}

.menu-icon,
.contact-icon {
display: block;
}

.navbar-container {
display: flex;
width: 100%;
justify-content: space-evenly;
}

.contact-icon {
display: block;
margin-left: auto;
}

.mega-menu {
left: 100%;
}

.mega-menu::before {
left: 40%;
}
.drawer-content .drawer-menu {
font-size: 48px;
font-weight: 800;
}
.drawer-content
{
align-items: center;
}
.drawer-cta-button
{
width: 80%;
}
}

@keyframes cardDrop {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</code></pre>
<p>I tried to give .mega-menu width:100% but it doesn't cover full width. I tried width:1920px I still doesn't shift to full width, Is there any other way to do it?</p>
Continue reading...
 
Top