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>
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.
Get rid of all overflow:scroll
properties present and put overflow-x:auto
on the body itself.
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.