Can't Achieve Sticky-Resonsive-Dropdown Top Menu

Explorer ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

I am trying to create a top navbar that is

- Responsive (goes to a hamburger) 

- Has drop down buttons

- Is sticky (header panel scrolls up but menu stays at top of screen)

I have a menu that is drop-down and responsive (see code below). For stickiness, I have tried the method shown by W3Schools at: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

But the drop-downs don't work properly in either full-width or mobile (burger) mode. Help in achieving the desired result with HTML, CSS and JS would be much appreciated.

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- -------- COMMON TAGS---------------- -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <!--  -->
        <style>
            /*  */

            /*  */
            /* %%%%%%%%%%%%%%%%%%%%%%%%%%% RESPONSIVE DROPDOWN MENU  */
            /* %%%%%%%%%%%%%%%%%%%%%%%%%%% REQUIRES JAVASCRIPT FOR RESPONSIVE */
            /*  */
            /*  */
            /* NB: Margins: T-R-B-L, T-RL-B, TB-RL, TRBL */
            /*  */

            .topnav {
                overflow: hidden;
                background-color: rgb(63, 100, 56);
                /* background-image: url("../images/back_dkgreen.gif"); */
                /* background-color: black; */
            }

            .botnav {
                overflow: hidden;
                background-color: rgb(63, 100, 56);
                /* background-image: url("../images/back_dkgreen.gif"); */
                /* background-color: black; */
            }

            .botnav a {
                float: left;
                display: block;
                min-width: 15%;
                font-family: "Times New Roman", Times, serif;
                color: yellow;
                text-align: center;
                padding: 10px 15px;
                text-decoration: none;
                font-size: 17px;
                /* border: 1px solid black; */
                border-right: 1px solid grey;
            }

            .topnav a {
                float: left;
                display: block;
                min-width: 80px;
                font-family: "Times New Roman", Times, serif;
                color: yellow;
                text-align: center;
                padding: 5px 15px;
                text-decoration: none;
                font-size: 17px;
                line-height: 20px;
                border-right: 1px solid grey;
            }

            .flagnav {
                height: 25px;
                width: auto;
                padding: 0;
                margin-top: 5px;
            }

            /* --------------------- 1-LINE ITEM AMONG 2-LINE ITEMS */
            .oneline a {
                padding: 17px 15px;
            }
            .active {
                background-color: black;
                color: red;
            }
            .topnav .icon {
                display: none;
            }

            .dropdown {
                float: left;
                overflow: hidden;
                font-family: "Times New Roman", Times, serif;
            }
            .dropdown .dropbtn {
                font-size: 17px;
                line-height: 20px;
                border: none;
                outline: none;
                color: yellow;
                padding: 7px 15px;
                /* padding: 16px 16px; */
                background-color: inherit;
                font-family: inherit;
                border-right: 1px solid grey;
                margin: 0;
            }
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
                z-index: 1;
            }
            .dropdown-content a {
                float: none;
                color: yellow;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }
            .topnav a:hover,
            .dropdown:hover .dropbtn {
                background-color: rgb(52, 0, 194);
                color: yellow;
            }
            .dropdown-content a:hover {
                background-color: rgb(52, 0, 194);
                color: yellow;
            }
            .dropdown:hover .dropdown-content {
                background-color: black;
                color: yellow;
                display: block;
            }
            /* mmmmmmmmmmmmmmmmmmmmmmmmmmm MEDIA - <= 650px */

            @media screen and (max-width: 650px) {
                .topnav a,
                .dropdown .dropbtn {
                    display: none;
                }

                .topnav a.icon {
                    float: right;
                    display: block;
                    color: white;
                    font-weight: bold;
                }

                .topnav.responsive {
                    position: relative;
                }
                .topnav.responsive .icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                .topnav.responsive a {
                    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;
                    border-bottom: 1px solid whitesmoke;
                }
            }
            /* mmmmmmmmmmmmmmmmmmmmmmmmm (Media-End)  */
            /*  */
        </style>
    </head>

    <!-- <body> -->
    <body>
        <!--  -->
        <!-- %%%%%%%%%%%%%%%%%%%%%%%%%%  HEADER PANEL   -->

        <div style="width: 100%; height: 100px; background-color: chartreuse">
            <br />
            HEADER PANEL
        </div>

        <!--  -->
        <!-- %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% MENU   -->
        <!--  -->
        <div class="topnav" id="myTopnav">
            <a class="active" style="padding: 17px 15px" href="index.html">
                Home
            </a>
            <!--  -->
            <a href="thesuites.html">
                The
                <br />
                Suites
            </a>
            <a href="aboutus.html">
                About
                <br />
                Us
            </a>
            <div class="dropdown">
                <button class="dropbtn">
                    About
                    <br />
                    San Cristóbal
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="whysancristobal.html">Why San Cristóbal?</a>
                    <a href="gettinghere.html">
                        Getting Here &
                        <br />
                        Getting Around
                    </a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">
                    Activities &
                    <br />
                    Attractions
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="sightseeing.html">Sightseeing</a>
                    <a href="wildlife.html">Wildlife</a>
                    <a href="dive-snorkel.html">Dive & Snorkel</a>
                    <a href="fishing.html">Fishing</a>
                    <a href="surfing.html">Surfing</a>
                    <a href="moretoenjoy.html">More...</a>
                </div>
            </div>
            <a href="rates-policies.html">
                Rates &
                <br />
                Policies
            </a>

            <a
                href="javascript&colon;void(0);"
                style="font-size: 15px"
                class="icon"
                onclick="nav3Function()"
            >
                Menu &#9776;
            </a>
        </div>
        <script>
            function nav3Function() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }
            }
        </script>
        <!--  -->
        <!-- END OF HEADER SECTION -->
        <!--  -->

        <div style="width: 100%; height: 1200px; background-color: lightgray">
            <br />
            CONTENT
        </div>

        <!-- END OF FOOTER -->
    </body>
</html>

 

Thanks in advance,

Sean

Views

79

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Aug 25, 2021 Aug 25, 2021

You're using an ancient method for creating a navigation bar, 'float' was a hack, we have much better workflows now, namely Flexbox.

 

You can't use overflow: hidden; on the .topNav css selector as that  as the name suggests will hide the dropdown navigation.

 

 

As a solution use position: sticky; and comment out 'overflow: hidden;'

 

 

.topnav {
/* overflow: hidden; */
background-color: rgb(63, 100, 56);
/* background-image: url("../images/back_dkgreen.gif"); */
/* background-color: black; */
position
...

Likes

Translate

Translate
LEGEND ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

You're using an ancient method for creating a navigation bar, 'float' was a hack, we have much better workflows now, namely Flexbox.

 

You can't use overflow: hidden; on the .topNav css selector as that  as the name suggests will hide the dropdown navigation.

 

 

As a solution use position: sticky; and comment out 'overflow: hidden;'

 

 

.topnav {
/* overflow: hidden; */
background-color: rgb(63, 100, 56);
/* background-image: url("../images/back_dkgreen.gif"); */
/* background-color: black; */
position: sticky;
top: 0;
}

 

 

Then clear the navigation:

 

Menu &#9776;
</a>
<br style="clear: both;">
</div>
<script>

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

LATEST

Thanks Osgood - I anticipated a more complicated fix. I've tried it on a couple of pages so far and it seems to be working fine. (I just had to add z-index to the navbar to overcome some of the content.) 

 

I use Flexbox extensively in the pages but I hadn't considered it for the menus.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 25, 2021 Aug 25, 2021

Copy link to clipboard

Copied

Bootstrap can do all that & so much more...

https://www.markuptag.com/bootstrap-5-sticky-header-on-scroll/

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines