Search code examples
cssmenuoverflowsticky

How to overflow:scroll on sticky div


I'm creating a WordPress theme and I'd like to make sticky horizontal menu which has overflow:scroll. What happens is when I'm trying to do that it's either not working or it hides the content.

Below I post the code.

HTML:

.container
{
	height:100vh;
	
	
}

body
{
	background-color:grey;
	
}

#navmenu 
{
	position:sticky;
	height:70px;
	text-align:center;
	overflow:scroll;
	border-top:1px solid white;	
}

#navmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	text-align:center;
	min-width:100%;
	
	
}

#navmenu li {
    float: left;
	font-size:14px;
	text-align:center;
	
	
	
}

#navmenu li a {
    display: inline-block;
    /*color: white;*/
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	
}

#navmenu li a:hover
{
	background-color:#111;
}



.logo
{
	height:50px;
	float:left;
}
<html>

<head>
	<link rel="stylesheet" type="text/css" href="about.css">
	
</head>



<body>
	
<div class="container">
<div id="logo"></div>

<div id="navmenu">
	
	<ul>
		<li><img style="height:70px" src="img/logo.png"></li>
		<li><a href="#">OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION</a></li>
		<li><a href="#">OPTION OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION</a></li>
	</ul>
	
	
	
</div>



</div>
</body>

</html>


Solution

  • The author of the question has clarified (see comments) that they want the entire page to scroll horizontally, not just the nav bar.

    Here's a JSFiddle solution: jsfiddle.net/qwjshv9s/1

    There are two parts to this solution.

    1. Don't let anything except the body scroll.

    Get rid of all overflow:scroll properties present and put overflow-x:auto on the body itself.

    1. Don't allow the menu to wrap.

    Apply whitespace:nowrap to the <ul> and switch the <li> elements from float:left to display:inline-block.

    --

    By the way, to allow scrolling horizontally only, you can use:

    overflow-x: scroll;
    

    This only allows scrolling on the X axis. If you don't want the scrollbar to always be there, you can do

    overflow-x: auto;
    

    and it will scroll only when needed.