Сделать меню прокручиваемым на меньшем горизонтальном экране мобильного телефона ⇐ CSS

[Anonymous]

В моем меню используется ряд ссылок, которые появляются при наведении курсора на родительский элемент меню. Чтобы мой веб-сайт хорошо работал на мобильных устройствах, я решил применить более адаптивный подход к дизайну и использовать запросы @media для отображения бургер-бара в качестве меню верхнего уровня. Однако из-за уменьшения занимаемого пространства некоторые более длинные меню оказываются за пределами экрана, и прокрутка меню не работает.
Когда мое меню уменьшено, а телефон находится в альбомной ориентации, нижняя часть вниз скрыты.
Если пользователь, скажем, на iPhone, поворачивает телефон боком, меню обрезается, и он не может прокрутить вниз, чтобы увидеть остальную часть меню в этой ориентации. . Вот изображение, иллюстрирующее проблему в режиме «Портрет против пейзажа».

Код: Выделить всё

    

[url=/]Home[/url]

Services ▼

[url=omaha-house-painter.html]- Exterior Painting[/url]
[url=omaha-siding-contractor-carpenter.html]- Siding Repair[/url]
[url=chimney-siding-repair.html]- Chimney Siding Repair[/url]
[url=omaha-woodpecker-siding-repair.html]- Woodpecker Siding Repair[/url]
[url=omaha-vinyl-siding-repair.html]- Vinyl Siding Repair[/url]
[url=omaha-interior-painting-contractor.html]- Interior Painting[/url]
[url=omaha-cabinet-trim-staining.html]- Cabinet Painting[/url]
[url=omaha-deck-staining-contractor.html]- Deck Staining[/url]
[url=omaha-fence-staining-contractor.html]- Fence Staining[/url]
[url=omaha-power-washing-services.html]- Power Washing[/url]


[url=reviews-testimonials-feedback.html]Reviews[/url]

Gallery▼

[url=omaha-painting-service.html]- Exterior Painting[/url]
[url=omaha-hardboard-siding-replaced.html]- Siding Replacement[/url]
[url=omaha-interior-painter.html]- Interior Painting[/url]
[url=omaha-deck-refinishing.html]- Decks[/url]
[url=pergola-building-staining.html]- Pergolas[/url]


[url=about-us.html]About[/url]
[url=contact-us.html]Contact[/url]
[url=omaha-painters-blog.html]Blog[/url]


[url=https://www.facebook.com/ScottsPaintingOmaha]Facebook[/url]

[url=https://x.com/ScottsPainting_]Twitter - X[/url]

[url=https://www.instagram.com/scotts.painting]Instagram[/url]

[url=https://www.pinterest.com/scottspaintingomaha]Pinterest Ideas[/url]

[url=https://www.linkedin.com/company/scott-s-painting-staining-inc]LinkedIn[/url]

[url=https://www.youtube.com/channel/UC4vKs_a0vhlN_4JQfTOy7hA]YouTube Channel[/url]

[url=https://www.yelp.com/biz/scotts-painting-and-staining-omaha-11]Yelp Painter[/url]

[url=https://www.houzz.com/professionals/painters/scotts-painting-and-staining-inc-pfvwus-pf~1989876536]Find us on Houzz[/url]
[url=#]

[/url]

Код: Выделить всё

/****************** 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}

Подробнее здесь: https://stackoverflow.com/questions/792 ... ile-screen