Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Navbar

Sticky Responsive Top Navigation Bar With 3-line Dropdown Menu

Post a Comment
I have a simple sticky responsive top navigation bar with 3-line dropdown menu. To see the live demo of above code click here Everything is fine but dropdown is not working. Befor

Solution 1:

Replace position: absolute; with position: fixed;

.dropdown-content {
    display: none;
    position: fixed; /* <------------- */background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px8px16px0pxrgba(0, 0, 0, 0.2);
    z-index: 1;
}

Example:

<html><head><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>body {
            margin: 0;
            font-family: inherit
        }

        .header {
            font-family: Consolas, Helvetica, sans-serif, Arial;
            padding: 20px;
            text-align: center;
            background-image: linear-gradient(to right, #000a98, #00B8FF);
            color: white;
            font-size: 15px;

        }

        .topnav {
            overflow: hidden;
            background-color: #333;
            background-image: linear-gradient(to right, #000a98, #00B8FF);
        }


        .topnava {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px16px;
            text-decoration: none;
            font-size: 17px;
        }

        .active {
            background-image: linear-gradient(to right, #000a98, #00B8FF);
            color: white;
        }

        .topnav.icon {
            display: none;
        }

        .dropdown {
            float: left;
            overflow: hidden;

        }

        .dropdown.dropbtn {
            font-size: 17px;
            border: none;
            outline: none;
            color: white;
            padding: 14px16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        .dropdown-content {
            display: none;
            position: fixed;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px8px16px0pxrgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-contenta {
            float: none;
            color: black;

            padding: 12px16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .topnava:hover,
        .dropdown:hover.dropbtn {
            background-color: #555;
            color: white;
        }

        .dropdown-contenta:hover {
            background-color: #ddd;
            color: black;
        }

        .dropdown:hover.dropdown-content {
            display: block;
        }

        @media screen and (max-width: 600px) {

            .topnava:not(:first-child),
            .dropdown.dropbtn {
                display: none;
            }

            .topnava.icon {
                float: right;
                display: block;
            }
        }

        @media screen and (max-width: 600px) {
            .topnav.responsive {
                position: relative;
            }

            .topnav.responsive.icon {
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnav.responsivea {
                float: none;
                display: block;
                text-align: left;
            }

            .topnav.responsive.dropdown {
                float: none;
            }

            .topnav.responsive.dropdown-content {
                position: relative;
            }

            .topnav.responsive.dropdown.dropbtn {
                display: block;
                width: 100%;
                text-align: left;
            }

        }

        .content {
            padding: 16px;
        }

        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }

        .sticky+.content {
            padding-top: 60px;
        }
    </style></head><body><divclass="header">hhvvvvvvvvv
    </div><divclass="topnav"id="myTopnav"><ahref="#home"class="active">Home</a><ahref="#news">News</a><ahref="#contact">Contact</a><divclass="dropdown"><buttonclass="dropbtn">Dropdown
                <iclass="fa fa-caret-down"></i></button><divclass="dropdown-content"><ahref="#">Link 1</a><ahref="#">Link 2</a><ahref="#">Link 3</a></div></div><ahref="#about">About</a><ahref="javascript:void(0);"style="font-size:15px;"class="icon"onclick="myFunction()">&#9776;</a></div><script>functionmyFunction() {
            var x = document.getElementById("myTopnav");

            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
        window.onscroll = function () { myFunction() };

        var navbar = document.getElementById("myTopnav");
        var sticky = navbar.offsetTop;

        functionmyFunction() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
            } else {
                navbar.classList.remove("sticky");
            }
        }

        //window.addEventListener('scroll', stickyNavigation);</script><divstyle="padding-left:16px"><h2>Responsive Topnav with Dropdown</h2><p>Resize the browser window to see how it works.</p><p>Hover over the dropdown button to open the dropdown menu.</p><h2>Responsive Topnav with Dropdown</h2><p>Resize the browser window to see how it works.</p><p>Hover over the dropdown button to open the dropdown menu.</p><h2>Responsive Topnav with Dropdown</h2><p>Resize the browser window to see how it works.</p><p>Hover over the dropdown button to open the dropdown menu.</p><h2>Responsive Topnav with Dropdown</h2><p>Resize the browser window to see how it works.</p><p>Hover over the dropdown button to open the dropdown menu.</p></div></body></html>

Post a Comment for "Sticky Responsive Top Navigation Bar With 3-line Dropdown Menu"