Search code examples
jquerycss-positionfixed

css dropdown menu issue on small device

I am trying to have a fix menu on my iPhone media query. This is working as its suppose to as long as I clickthe menu when its on the top of the page, but as soon as I scroll down the page and then click on the menu, it doesn't fold out properly until I scroll back at the top of the page again. It works normally on all other media queries except for the media query 480px and below. This is the sample page.

-Sohail

Solution

  • You're going to want to set the z-index on .menu-button

    .menu-button {
position: fixed;
width: 100%;
top: 0;
left: 0;
display: block;
padding: 1em;
background: #ff8400;
color: #222222;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
z-index: 99; <-- HERE
}

    Additionally you will want to alter your margin to move your first menu item 'blog' below the new top Menu li

    Update:
    Yes, to get the margin add 52px of margin to .flexnav.flexnav-show:

    .flexnav.flexnav-show {
max-height: 2000px;
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
margin-top: 52px; <-- HERE
}

    To get the article to move down add padding to the first p. Add this to the lowest media query:

    p:first-child {
   margin-top: 50px;
}