How to make a sticky menu scroll on smaller screen based on the height

Question

I have made a menu that becomes sticky on scroll. The problem is that on screen with a small height (mobile for example) the menu can not be completely seen because it is somehow much longer than the height as you can seen on the image below.

But on a longer mobile screen the menu can be seen fully

This is the code used to make the menu and make it sticky on scroll

Css

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin:0 auto; /* pour centrer le menu */
    padding: 0;
    overflow:hidden;

    background-color: #FFF;
     text-align: center;
     width:1400px; /* pour centrer le menu */
     max-width:100%;
     max-width:100%;  
}

/* Float the list items side by side */
ul.topnav li {float: left;    }

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #0071a6;
    text-align: center;

    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
     font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    transition: all .2s ease-in-out;
    width:185px; /* Pour centrer le menu */
}

/* Change background color of links on hover */
ul.topnav li a:hover {
    background-color: #0071a6; 
    color:#FFF;
    transform: scale(1.1);
    }

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/*
##############################################################################
Add media query
*/


@media screen and (max-width:768px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }

  ul.topnav li a {
      width:auto;  
  }

  ul.topnav {
      width:auto;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens 

Normalement @media screen and (max-width:768px) 

*/
@media screen and (max-width:768px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

  ul.topnav li a {
      width:auto;  
  }


  ul.topnav {
      width:auto;
  }

}


/*

Pour le menu sticky
*/


.menu {

 }

.menu-padding {

    padding-top:0px;
}

.sticky {
    position:fixed;
    top:0;
    z-index:1;
    overflow:hidden;


}

.sticky ul.topnav {
    background-color:#0071a6;
    border-bottom: 1px solid #666;

    /*
    border: 1px solid #FFFFFF;
    */

}

.sticky ul.topnav li a {
    color:#FFF;
}

Javascript and Jquery

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}

/*
Jquery to make the menu sticky on scroll
*/

$(document).ready(function () {

    var menu = $('.menu');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            $('.menu').addClass('sticky');
            $('.content').addClass('menu-padding');
        } else {
            $('.menu').removeClass('sticky');
            $('.content').removeClass('menu-padding');
        }


    }

    document.onscroll = scroll;

});

Html

<div class="menu">

    <ul class="topnav">
  <li><a href="#home">HOME</a></li>
  <li><a href="#news">WHO WE ARE </a></li>
  <li><a href="#contact">WHAT WE DO</a></li>
  <li><a href="#about">BLOGS</a></li>
  <li><a href="#about">GET INVOLVED</a></li>
  <li><a href="#about">JOBS</a></li>
  <li><a href="#about">CONTACT US</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

    </div>

QUESTION : How to make the sticky menu scroll on screen with a small height yet when it reaches the normal position it will no longer be sticky and be fixed ?

I would also use a media query to reduce the size of the text on a small screen. but you might need to increase the padding around the links to ensure that a finger tap will easily target the link. — gavgrif, Jul 24 '16 at 00:10
Did you find solution to this? I'm looking for the same solution but I cannot find it. So if you know the solution can you please provide it? — C0mpl3x, Mar 03 '21 at 19:41

score 1 · Answer 1 · answered Jul 24 '16 at 00:04

1

It sounds like you want the menu itself to be scrollable if it is being displayed on a small screen.

Try this:

.menu {
  max-height:100vh;
  overflow-y:auto;
}

It won't do anything unless the menu would be larger than the screen. Alternatively, use media queries to redesign a mobile version of the menu that won't be cut off in the first place (Reducing the padding on the links would probably do it for this case).

answered Jul 24 '16 at 00:04

Matt Broatch

710
4
16

Yes i would like the menu itself to be scrollable but the code you gave me did not work on all devices. Kindly check the result on mobile at http://usefaith.patronempire.com. I applied it to the .menu and nothing changed and i also did on the .sticky which is actually where it changes to on mobile yet it is only scrollable on some devices like Nokia lumia 635 but not on nokia lumia 520 for example. Do you have any solution that works on every plateform so that i may accept your answer ? Thanks and plus one. – Man Of God Jul 24 '16 at 16:04
I wish I had a smartphone so I could test it out... One last thing I have would be to set the meta tag in the html to: – Matt Broatch Jul 24 '16 at 19:51
Ok but `overflow-y:scroll;` worked better than auto by the way But my problem is still not solved – Man Of God Jul 26 '16 at 05:01

How to make a sticky menu scroll on smaller screen based on the height

1 Answers1