htmlcssscrollmenu

Make menu scrollable on smaller horizontal mobile screen

My menu is using a series of links to appear when you hover over the parent menu item. To make my website work well on mobile devices, I have decided to take a more responsive design approach and use @media query's to display a burger bar as the top level menu. However with the reduced real estate some longer menus are off screen and scrolling on the menu is not working.

When my menu is shrunk down, and the phone is in landscape orientation, the bottom drop downs are hidden.

If a user, say on an iPhone, turns the phone sideways, the menu is then cut off and they cannot scroll down to see the rest of the menu in this orientation. Here is an image to depict the issue in Portrait vs Landscape.

Portrait

Landscape (No menu scrolling)

    <nav>
        <div class="topnav" id="topNav">
            <a href="/" title="Scott's Painting & Staining Inc">Home</a>
            <div class="dropdown">
                <button class="dropbtn" title="Omaha Services">Services &#9660;</button>
                <div class="dropdown-content">
                    <a href="omaha-house-painter.html" title="Omaha Exterior Painting Services">- Exterior Painting</a>
                    <a href="omaha-siding-contractor-carpenter.html" title="Omaha Siding Repair Services">- Siding Repair</a>
                    <a href="chimney-siding-repair.html" title="Omaha Chimney Siding Repair Services">- Chimney Siding Repair</a>
                    <a href="omaha-woodpecker-siding-repair.html" title="Omaha Woodpecker Siding Repair Services">- Woodpecker Siding Repair</a>
                    <a href="omaha-vinyl-siding-repair.html" title="Omaha Vinyl Siding Repair Services">- Vinyl Siding Repair</a>
                    <a href="omaha-interior-painting-contractor.html" title="Omaha Interior Painting Services">- Interior Painting</a>
                    <a href="omaha-cabinet-trim-staining.html" title="Omaha Cabinet Painting Services">- Cabinet Painting</a>
                    <a href="omaha-deck-staining-contractor.html" title="Omaha Deck Staining Services">- Deck Staining</a>
                    <a href="omaha-fence-staining-contractor.html" title="Omaha Fence Staining Services">- Fence Staining</a>
                    <a href="omaha-power-washing-services.html" title="Omaha Power Washing Services">- Power Washing</a>
                </div>
            </div>
            <a href="reviews-testimonials-feedback.html" title="5-star Reviews">Reviews</a>
            <div class="dropdown">
                <button class="dropbtn" title="Omaha Photo Gallery">Gallery&#9660;</button>
                <div class="dropdown-content">
                    <a href="omaha-painting-service.html" title="Omaha Painters">- Exterior Painting</a>
                    <a href="omaha-hardboard-siding-replaced.html" title="Omaha Siding Replacement">- Siding Replacement</a>
                    <a href="omaha-interior-painter.html" title="Omaha Interior Painting">- Interior Painting</a>
                    <a href="omaha-deck-refinishing.html" title="Omaha Deck Staining">- Decks</a>
                    <a href="pergola-building-staining.html" title="Omaha Pergola Staining">- Pergolas</a>
                </div>
            </div>
            <a href="about-us.html" title="About Scott's Painting & Staining Inc.">About</a>
            <a href="contact-us.html" title="Contact Painters Near Me">Contact</a>
            <a href="omaha-painters-blog.html" title="Omaha Painters Blog">Blog</a>
            <div class="round-div">
                <div class="facebook-round">
                    <a href="https://www.facebook.com/ScottsPaintingOmaha" title="Facebook" target="new">Facebook</a></div>
                <div class="x-round">
                    <a href="https://x.com/ScottsPainting_" title="Twitter - X" target="new">Twitter - X</a></div>
                <div class="instagram-round">
                    <a href="https://www.instagram.com/scotts.painting" title="Instagram" target="new">Instagram</a></div>
                <div class="pinterest-round">
                    <a href="https://www.pinterest.com/scottspaintingomaha" title="Painting Ideas on Pinterest" target="new">Pinterest Ideas</a></div>
                <div class="linkedin-round">
                    <a href="https://www.linkedin.com/company/scott-s-painting-staining-inc" title="LinkedIn" target="new">LinkedIn</a></div>
                <div class="youtube-round">
                    <a href="https://www.youtube.com/channel/UC4vKs_a0vhlN_4JQfTOy7hA" title="YouTube Channel" target="new">YouTube Channel</a></div>
                <div class="yelp-round round-hide">
                    <a href="https://www.yelp.com/biz/scotts-painting-and-staining-omaha-11" title="Yelp" target="new">Yelp Painter</a></div>
                <div class="houzz-round round-hide">
                    <a href="https://www.houzz.com/professionals/painters/scotts-painting-and-staining-inc-pfvwus-pf~1989876536" title="Houzz" target="new">Find us on Houzz</a></div>
                <a href="#" class="icon width52" onclick="navFunction()" title="Omaha Painters">
                    <div class="menu-burger"></div>
                    <div class="menu-burger-middle"></div>
                    <div class="menu-burger"></div>
                </a>
            </div>
        </div>
    </nav>

/****************** Burger Menu and Main Menu ***********************************************/

.topnav{overflow:hidden;background-color:#333}

.topnav a{
    float:left;
    display:block;
    color:#ffc82d;
    text-align:center;
    padding:14px 10px;
    text-decoration:none;
    font-size:18px}

.topnav a:hover, .dropdown:hover .dropbtn{background-color:#ddd;color:black}
.topnav .icon{display:none}

/***************** nav sub-menu **********************************/

.dropdown{float:left;overflow:hidden}
.dropdown .dropbtn{font-size:18px;border:none;outline:none;background-color:#333;color:#ffc82d;padding:14px 16px;font-family:inherit;margin:0;text-align:center;text-decoration:none}
.dropdown-content{display:none;position:absolute;background-color:#333;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}
.dropdown-content a{float:none;color:#ffc82d;padding:12px 16px;text-decoration:none;display:block;text-align:left}
.dropdown-content a:hover{background-color:#ddd;color:black}
.dropdown:hover .dropdown-content{display:block}

.menu-burger{                   /* build the menu burger bars style - don't overpad the top and bottom burger */
    width:30px;
    height:3px;
    background-color:#ffc82d;
    margin:0}

.menu-burger-middle{            /* build the menu burger bars style*/
    width:30px;
    height:3px;
    background-color:#ffc82d;
    margin:6px 0}

.icon:hover .menu-burger{background-color:black}            /* make the menu burger bars turn black when hovered over */
.icon:hover .menu-burger-middle{background-color:black}     /* make the middle menu burger bar turn black when hovered over (not sure how to combine this with the above) */
  
.round-div{float:right;padding:0}   /* remove the padding that is inherited from .topnav a{ */

/*****************************************************************/


/* Phone View */
@media (max-width:550px){
    .topnav a:not(:first-child), .dropdown .dropbtn{display:none}
    .topnav a.icon{float:right;display:block}
    .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}


/****************** Burger Menu and Main Menu ***********************************************/

.topnav{overflow:hidden;background-color:#333}

.topnav a{
    float:left;
    display:block;
    color:#ffc82d;
    text-align:center;
    padding:14px 10px;
    text-decoration:none;
    font-size:18px}

.topnav a:hover, .dropdown:hover .dropbtn{background-color:#ddd;color:black}
.topnav .icon{display:none}

/***************** nav sub-menu **********************************/

.dropdown{float:left;overflow:hidden}
.dropdown .dropbtn{font-size:18px;border:none;outline:none;background-color:#333;color:#ffc82d;padding:14px 16px;font-family:inherit;margin:0;text-align:center;text-decoration:none}
.dropdown-content{display:none;position:absolute;background-color:#333;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}
.dropdown-content a{float:none;color:#ffc82d;padding:12px 16px;text-decoration:none;display:block;text-align:left}
.dropdown-content a:hover{background-color:#ddd;color:black}
.dropdown:hover .dropdown-content{display:block}

.menu-burger{                   /* build the menu burger bars style - don't overpad the top and bottom burger */
    width:30px;
    height:3px;
    background-color:#ffc82d;
    margin:0}

.menu-burger-middle{            /* build the menu burger bars style*/
    width:30px;
    height:3px;
    background-color:#ffc82d;
    margin:6px 0}

.icon:hover .menu-burger{background-color:black}            /* make the menu burger bars turn black when hovered over */
.icon:hover .menu-burger-middle{background-color:black}     /* make the middle menu burger bar turn black when hovered over (not sure how to combine this with the above) */
  
.round-div{float:right;padding:0}   /* remove the padding that is inherited from .topnav a{ */

/*****************************************************************/


/* Phone View */
@media (max-width:550px){
    .topnav a:not(:first-child), .dropdown .dropbtn{display:none}
    .topnav a.icon{float:right;display:block}
    .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}
<nav>
        <div class="topnav" id="topNav">
            <a href="/" title="Scott's Painting & Staining Inc">Home</a>
            <div class="dropdown">
                <button class="dropbtn" title="Omaha Services">Services &#9660;</button>
                <div class="dropdown-content">
                    <a href="omaha-house-painter.html" title="Omaha Exterior Painting Services">- Exterior Painting</a>
                    <a href="omaha-siding-contractor-carpenter.html" title="Omaha Siding Repair Services">- Siding Repair</a>
                    <a href="chimney-siding-repair.html" title="Omaha Chimney Siding Repair Services">- Chimney Siding Repair</a>
                    <a href="omaha-woodpecker-siding-repair.html" title="Omaha Woodpecker Siding Repair Services">- Woodpecker Siding Repair</a>
                    <a href="omaha-vinyl-siding-repair.html" title="Omaha Vinyl Siding Repair Services">- Vinyl Siding Repair</a>
                    <a href="omaha-interior-painting-contractor.html" title="Omaha Interior Painting Services">- Interior Painting</a>
                    <a href="omaha-cabinet-trim-staining.html" title="Omaha Cabinet Painting Services">- Cabinet Painting</a>
                    <a href="omaha-deck-staining-contractor.html" title="Omaha Deck Staining Services">- Deck Staining</a>
                    <a href="omaha-fence-staining-contractor.html" title="Omaha Fence Staining Services">- Fence Staining</a>
                    <a href="omaha-power-washing-services.html" title="Omaha Power Washing Services">- Power Washing</a>
                </div>
            </div>
            <a href="reviews-testimonials-feedback.html" title="5-star Reviews">Reviews</a>
            <div class="dropdown">
                <button class="dropbtn" title="Omaha Photo Gallery">Gallery&#9660;</button>
                <div class="dropdown-content">
                    <a href="omaha-painting-service.html" title="Omaha Painters">- Exterior Painting</a>
                    <a href="omaha-hardboard-siding-replaced.html" title="Omaha Siding Replacement">- Siding Replacement</a>
                    <a href="omaha-interior-painter.html" title="Omaha Interior Painting">- Interior Painting</a>
                    <a href="omaha-deck-refinishing.html" title="Omaha Deck Staining">- Decks</a>
                    <a href="pergola-building-staining.html" title="Omaha Pergola Staining">- Pergolas</a>
                </div>
            </div>
            <a href="about-us.html" title="About Scott's Painting & Staining Inc.">About</a>
            <a href="contact-us.html" title="Contact Painters Near Me">Contact</a>
            <a href="omaha-painters-blog.html" title="Omaha Painters Blog">Blog</a>
            <div class="round-div">
                <div class="facebook-round">
                    <a href="https://www.facebook.com/ScottsPaintingOmaha" title="Facebook" target="new">Facebook</a></div>
                <div class="x-round">
                    <a href="https://x.com/ScottsPainting_" title="Twitter - X" target="new">Twitter - X</a></div>
                <div class="instagram-round">
                    <a href="https://www.instagram.com/scotts.painting" title="Instagram" target="new">Instagram</a></div>
                <div class="pinterest-round">
                    <a href="https://www.pinterest.com/scottspaintingomaha" title="Painting Ideas on Pinterest" target="new">Pinterest Ideas</a></div>
                <div class="linkedin-round">
                    <a href="https://www.linkedin.com/company/scott-s-painting-staining-inc" title="LinkedIn" target="new">LinkedIn</a></div>
                <div class="youtube-round">
                    <a href="https://www.youtube.com/channel/UC4vKs_a0vhlN_4JQfTOy7hA" title="YouTube Channel" target="new">YouTube Channel</a></div>
                <div class="yelp-round round-hide">
                    <a href="https://www.yelp.com/biz/scotts-painting-and-staining-omaha-11" title="Yelp" target="new">Yelp Painter</a></div>
                <div class="houzz-round round-hide">
                    <a href="https://www.houzz.com/professionals/painters/scotts-painting-and-staining-inc-pfvwus-pf~1989876536" title="Houzz" target="new">Find us on Houzz</a></div>
                <a href="#" class="icon width52" onclick="navFunction()" title="Omaha Painters">
                    <div class="menu-burger"></div>
                    <div class="menu-burger-middle"></div>
                    <div class="menu-burger"></div>
                </a>
            </div>
        </div>
    </nav>

function navFunction() {    //used to show the drop down menu in the burger bar
    var x = document.getElementById("topNav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

Solution

  • To solve your problem use a max-height and overflow-y: scroll. And as improvements i would look for some js to open and close dropdowns, hover is not a right choice when doing responsive. Also, get the Home and burger on top to not scroll loose sight of them, and dont use the scroll inside the dropdown , because it will feel weird and if you want to scroll to an other tab you will find it hard or impossible. Thats a bit of exemple that worked from the site you gave me as exemple:

    <div class="topnav responsive" id="topNav" bis_skin_checked="1" style="">
    <a href="/" title="Scott's Painting &amp; Staining Inc">Home</a>
    <a href="#" class="icon width52" onclick="navFunction()" title="Omaha Painters">
        <div class="menu-burger" bis_skin_checked="1"></div>
        <div class="menu-burger-middle" bis_skin_checked="1"></div>
        <div class="menu-burger" bis_skin_checked="1"></div>
    </a>
    <div style="max-height: calc(100vh - 154px);overflow-y: scroll;" bis_skin_checked="1">
        ...
    </div>
</div>

    So, this way you have the Home and the burger menu at the top, i've added a wrapper with the styles overflow and max-height. The max height i used a calc to have the full screen without getting out or too short. It's just 100vh to have the full view height minus the height of the top image and the home line. This way you only have the 'real menu' on scroll, and if you scroll, you can always hit the home, or close the menu, and if you open a dropdown, you can keep scrolling to open an other on. Haven't tried in desktop, it's just so you get the point, add classes and media queries if needed.

    enter image description here enter image description here