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.
<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 ▼</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▼</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 ▼</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▼</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 & 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.
- Trying to make a clickable navigation bar which can be clicked to close
- Resize image in the wiki of GitHub using Markdown
- Anchor links to start below the header which is fixed at the top
- Keep footer at bottom of page when page height dynamically changes using CSS
- What does the media="" attribute in the stylesheet HTML definition refer to?
- HTML CSS Fit image in fixed size
- Angular viewChild native scrollable CSS window layout quirks
- OpenWeather: not getting data
- Detecting if an <option> has been selected in <select> using CSS
- Do I use <img>, <object>, or <embed> for SVG files?
- Applying border-radius to bootstrap 5 table
- Validation for 10 digit mobile number and Showing Color On Input If Invalid
- How to increase space between dotted border dots
- How add element to collection using Thymeleaf
- How to remove id (#) target after refresh
- How exactly does link rel="preload" work?
- What is the role of index in the callback function of click in JQuery?
- Difficulty implementing accordion effect in Angular project
- Convert Rtf to HTML
- How to set div's height in css and html
- NavLink in React JS not working as expected?
- How can i replicate this corner-border-radius trick to an image in my project
- different grid area while using grid-template-column
- Is there a way to include hyperlinks in the body of a Twilio SMS?
- Why does z-index not work?
- How do I make the background image start at the top of the page and not below my sticky header?
- 3d Terrain Generation using ThreeJs/React
- How can I make a color wheel using CSS (with white at center and fading to black at the rim)?
- Logic to add vertical stepper lines
- Why the elapsedTime property of animation event is undefined