Custom Header | Vivek Singh

HTML

CSS

JAVA SCRIPT

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
                        <div class="body">
                            <div class="custom-header">
                                <div class="logo"><img src="https://rajputvivek.netlify.app/logo/logo.png" alt="logo"></div>
                                <ul class="main-menu">
                                    <li><a href="#" class="menu-link">Home</a></li>
                                    <li><a href="#" class="menu-link">About us</a></li>
                                    <li class="dropdown">
                                        <span class="arrow" data-bs-toggle="dropdown" data-target="first"><i class="bi bi-plus-lg"></i></span>
                                        <a href="#" class="menu-link">Services</a>
                                        <ul class="dropdown-menu first">
                                            <li><a href="#" class="menu-link">Web Development</a></li>
                                            <li><a href="#" class="menu-link">Graphic Desining</a></li>
                                            <li><a href="#" class="menu-link">SEO Management</a></li>
                                            <li><a href="#" class="menu-link">Digital Marketing</a></li>
                                            <li><a href="#" class="menu-link">Sofware Development</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <span class="arrow" data-bs-toggle="dropdown" data-target="second"><i class="bi bi-plus-lg"></i></span>
                                        <a href="#" class="menu-link">Services</a>
                                        <ul class="dropdown-menu second">
                                            <li><a href="#" class="menu-link">Web Development</a></li>
                                            <li><a href="#" class="menu-link">Graphic Desining</a></li>
                                            <li><a href="#" class="menu-link">SEO Management</a></li>
                                            <li><a href="#" class="menu-link">Digital Marketing</a></li>
                                            <li><a href="#" class="menu-link">Sofware Development</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#" class="menu-link">Contact us</a></li>
                                </ul>
                                <button class="button">
                                    <p>Button</p>
                                </button>
                                <div class="toggle" data-bs-toggle="toggle" aria-expanded="false" data-target="main-menu">
                                    <input type="checkbox">
                                    <div>
                                        <span class="line-1"></span>
                                        <span class="line-2"></span>
                                        <span class="line-3"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                                        <span class="arrow" data-bs-toggle="dropdown" data-target="second"><i class="bi bi-plus-lg"></i></span>

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        .body{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: self-start;
                            justify-content: center;
                            background: transparent;
                        }
                        
                        .custom-header {
                            width: 100%;
                            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                            background-color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 10px 25px;
                            position: relative;
                        }
                        
                        .custom-header .logo {
                            max-width: 150px;
                        }
                        
                        .custom-header .logo img {
                            max-width: 100%;
                            height: auto;
                        }
                        
                        .custom-header .main-menu {
                            list-style: none;
                            display: flex;
                            align-items: center;
                            height: 100%;
                        }
                        
                        .custom-header .main-menu .menu-link {
                            text-decoration: none;
                            color: #666;
                            display: inline-block;
                            margin: 0 10px;
                            padding: 1rem 1.5rem;
                            transition: color 250ms linear;
                        }
                        
                        .custom-header .main-menu .menu-link:hover {
                            color: #ff12a4;
                        }
                        
                        .custom-header .main-menu .dropdown {
                            position: relative;
                        }
                        
                        .custom-header .main-menu .dropdown .arrow {
                            display: none;
                        }
                        
                        .custom-header .main-menu .dropdown .dropdown-menu {
                            list-style: none;
                            position: absolute;
                            top: 100%;
                            left: 10px;
                            background-color: #fff;
                            height: auto;
                            width: max-content;
                            opacity: 0;
                            visibility: hidden;
                            transform: translateY(20px);
                            transition: all 300ms linear;
                            border-top: 2px solid #ddd;
                            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                        }
                        
                        .custom-header .main-menu .dropdown .dropdown-menu .menu-link {
                            margin: 0;
                            border-bottom: 1px solid #ddd;
                        }
                        
                        .custom-header .main-menu .dropdown .dropdown-menu li:last-child .menu-link {
                            border-bottom: 0;
                        }
                        
                        .custom-header .main-menu .dropdown::after {
                            position: absolute;
                            top: 20px;
                            right: 0;
                            content: "\F282";
                            color: #666;
                            font-family: 'bootstrap-icons';
                            font-size: 16px;
                            transition: transform 250ms linear;
                        }
                        
                        .custom-header .main-menu .dropdown:hover .dropdown-menu {
                            opacity: 1;
                            visibility: visible;
                            transform: translateY(0);
                        }
                        
                        .custom-header .main-menu .dropdown:hover::after {
                            transform: rotate(-180deg);
                        }
                        
                        .custom-header .main-menu .dropdown .dropdown-menu .menu-link {
                            padding: 1.5rem 2rem;
                            padding-right: 3rem;
                            width: 100%;
                            position: relative;
                            transition: all 300ms ease-in;
                        }
                        
                        .custom-header .main-menu .dropdown .dropdown-menu .menu-link::after {
                            position: absolute;
                            top: 30px;
                            left: 0;
                            content: "\F280";
                            font-family: 'bootstrap-icons';
                            color: #fff;
                            opacity: 0;
                            transition: opacity 150ms ease-in, left 400ms ease-in;
                        }
                        
                        .custom-header .main-menu .dropdown .dropdown-menu .menu-link:hover {
                            background-color: #ff12a4;
                            color: #fff;
                        }
                        
                        .custom-header .main-menu .dropdown .dropdown-menu .menu-link:hover::after {
                            left: 90%;
                            opacity: 1;
                        }
                        
                        .button {
                            all: unset;
                            display: flex;
                            align-items: center;
                            position: relative;
                            padding: 0.6em 2em;
                            border: #ff12a4 solid 1px;
                            border-radius: 50px;
                            color: #ff12a4;
                            font-size: 18px;
                            text-transform: uppercase;
                            font-weight: 500;
                            cursor: pointer;
                            overflow: hidden;
                            transition: border 300ms, color 300ms;
                            user-select: none;
                        }
                        
                        .button p {
                            z-index: 1;
                        }
                        
                        .button:hover {
                            color: #fff;
                        }
                        
                        .button:active {
                            border-color: #ff12a4;
                        }
                        
                        .button::after,
                        .button::before {
                            content: "";
                            position: absolute;
                            width: 9em;
                            aspect-ratio: 1;
                            background: #ff12a4;
                            opacity: 50%;
                            border-radius: 50%;
                            transition: transform 500ms, background 300ms;
                        }
                        
                        .button::before {
                            left: 0;
                            transform: translateX(-8em);
                        }
                        
                        .button::after {
                            right: 0;
                            transform: translateX(8em);
                        }
                        
                        .button:hover:before {
                            transform: translateX(-1em);
                        }
                        
                        .button:hover:after {
                            transform: translateX(1em);
                        }
                        
                        .button:active:before,
                        .button:active:after {
                            background: rgb(255, 18, 164);
                        }
                        
                        .toggle {
                            display: none;
                            position: relative;
                            cursor: pointer;
                            width: 40px;
                            height: 40px;
                            background: linear-gradient(45deg, rgb(183, 0, 255) 20%, rgb(255, 18, 164) 100%);
                            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.363);
                            border-radius: 5px;
                        }
                        
                        .toggle input {
                            opacity: 0;
                            width: 100%;
                            height: 100%;
                            z-index: 1;
                            cursor: pointer;
                            position: absolute;
                        }
                        
                        .toggle div {
                            width: 80%;
                            height: 80%;
                            margin: 10%;
                            position: absolute;
                        }
                        
                        .toggle span {
                            background: #fff;
                            width: 100%;
                            height: 2px;
                            border-radius: 5px;
                            display: block;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            transition: transform 0.5s, width 0.5s;
                        }
                        
                        .toggle .line-1 {
                            width: 50%;
                            transform: translate(-100%, -10px);
                            transform-origin: 0 0;
                        }
                        
                        .toggle .line-3 {
                            width: 50%;
                            left: auto;
                            right: 0;
                            transform: translate(0, 10px);
                            transform-origin: 100% 0;
                        }
                        
                        input:checked+div span.line-1 {
                            transform: translate(0, 0) rotate(-45deg);
                        }
                        
                        input:checked+div span.line-3 {
                            transform: translate(-100%, 0) rotate(-45deg);
                        }
                        
                        input:checked+div span.line-2 {
                            transform: translate(-50%, -50%) rotate(45deg);
                        }
                        
                        @media (max-width: 480px) {
                            .button {
                                display: none;
                            }
                        }
                        
                        @media (max-width: 1024px) {
                            .main-menu {
                                position: absolute;
                                top: 100%;
                                left: 5%;
                                width: 90%;
                                margin: auto;
                                background-color: #fff;
                                flex-direction: column;
                                align-items: flex-start !important;
                                height: auto !important;
                                transform: scaleY(0);
                                transition: all 300ms linear;
                                transform-origin: top;
                                border-bottom-right-radius: 20px;
                                border-bottom-left-radius: 20px;
                                box-shadow: 10px 0 30px -10px rgba(255, 18, 164, 0.4);
                            }
                        
                            .main-menu .menu-link {
                                width: 100%;
                                margin: 0 !important;
                                padding: 15px 20px !important;
                                border-bottom: 1px solid #ddd;
                            }
                        
                            .main-menu .dropdown::after {
                                display: none;
                            }
                        
                            .main-menu .dropdown .arrow {
                                cursor: pointer;
                                position: absolute;
                                top: 0;
                                right: 0;
                                border-left: 1px solid #ddd;
                                padding: 18px 0;
                                width: 40px;
                                display: grid !important;
                                place-content: center;
                            }
                        
                            .main-menu .dropdown .arrow:hover,
                            .main-menu .dropdown .arrow:focus,
                            .main-menu .dropdown .arrow:active {
                                i {
                                    transform: rotate(45deg);
                                }
                            }
                        
                            .main-menu .dropdown .arrow i {
                                font-size: 20px;
                                color: #666;
                                transition: transform 250ms ease;
                            }
                        
                            .main-menu .dropdown .dropdown-menu .menu-link {
                                border-bottom: 1px solid #ddd;
                            }
                        
                            .main-menu .dropdown-menu {
                                display: none;
                                width: 95% !important;
                                height: auto;
                                margin: auto;
                                position: unset !important;
                                box-shadow: none !important;
                                border: 0 !important;
                            }
                        
                            .main-menu .dropdown-menu li:last-child .menu-link {
                                border-bottom: 1px solid #ddd !important;
                            }

                            .custom-header .main-menu .dropdown .dropdown-menu .menu-link::after{
                                top: 20px;
                            }
                        
                            .main-menu .dropdown-menu:hover::after {
                                transform: rotate(45deg) !important;
                            }
                        
                            .main-menu .dropdown-menu.active {
                                display: block;
                                opacity: 1 !important;
                                visibility: visible !important;
                                transform: scaleY(1) !important;
                            }
                        
                            li {
                                width: 100%;
                        
                                &:last-child {
                                    .menu-link {
                                        border-bottom: 0;
                                    }
                                }
                            }
                        
                            .main-menu.active {
                                transform: scaleY(1);
                            }
                        
                            .toggle {
                                display: flex;
                            }
                        }

xxxxxxxxxx
                            background: linear-gradient(45deg, rgb(183, 0, 255) 20%, rgb(255, 18, 164) 100%);
 
                        .body{
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: self-start;
                            justify-content: center;
                            background: transparent;
                        }
                        
                        .custom-header {
                            width: 100%;
                            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                            background-color: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 10px 25px;
                            position: relative;
                        }
                        
                        .custom-header .logo {
                            max-width: 150px;

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        const toggleElements = document.querySelectorAll('[data-bs-toggle]');

                            toggleElements.forEach(function (toggleElement) {
                                toggleElement.addEventListener('click', function () {
                                    const targetSelector = toggleElement.getAttribute('data-target');
                                    const targetElement = document.querySelector(`.${targetSelector}`);
                    
                                    if (targetElement) {
                                        // Check if the target element has the 'active' class
                                        if ((!targetElement.classList.contains('active'))) {
                                            // If no, add the 'active' class
                                            targetElement.classList.add('active');
                                        } else {
                                            // If yes, remove the 'active' class
                                            targetElement.classList.remove('active');
                                        }
                                    }
                                });
                            });

                                    const targetElement = document.querySelector(`.${targetSelector}`);