CODEWITHSUNDEEP
javascriptcss
nunya
nunya

Reputation: 315

Unable to scroll mobile dropdown menu inside of fixed header

So I made a fixed dropdown menu that changes to a hamburger menu for mobile. Everything works fine on desktop but on mobile I'm unable to scroll the menu items. I have tried a plethora of suggested fixes for this but none of them fix my issue. Most of the fixes I've come across have included some form of the following but have not worked:

max-height: 300px;
overflow-y: scroll;

Here is a fiddle of what I have right now:

https://jsfiddle.net/doitliketyler/2gqd0hLs/3/

The black square is the mobile hamburger button. Does anyone know how to get this working properly and smoothly for mobile? Any help would be greatly appreciated. Thanks so much.

Upvotes: 2

Views: 3835

Answers (1)

Austen Holland
Austen Holland

Reputation: 1978

A position of static will prevent scrolling. So to fix this, you have to set your menu to a position of something like relative for mobile.

So for the .header selector inside the @media only screen and (max-width:960px) media query, set the position to relative.

@media only screen and (max-width: 960px) {
    .header {
        padding-bottom: 0;
        position: relative;
    }
}


Edit 1: To keep the fixed menu, one option is to set the dropdown portion to be a position of absolute with an overflow-y.

@media only screen and (max-width: 960px)
    .header .header__column--navigation {
        margin-top: 80px;
        position: absolute; //Added
        min-height: calc(100vh - 110px); //Added: set the second parameter of calc to the height of your header. ex: https://c.flm.pw/2018-06/6oiip.png
        height: 100%; //Added: Tell the absolute div to take up as much height as it needs.
        overflow-y: auto; //Added: Make the absolute div have the ability to scroll, but hide the scrollbar when it doesn't.
    }
}

Upvotes: 2

Related Questions