\$\begingroup\$
\$\endgroup\$
2
So I'm trying to code a navigation scroll bar like that looks like this:
enter image description here
This is the code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
height: 50px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<div style="width:100%;height:75px;overflow-y:hidden;overflow-x:scroll;">
<div class="wrapper">
<div class="content">
<div style="width:2000px;">
<ul>
<li><a href="http://www.w3schools.com"><img src="http://bithumor.co/bh-logo.png" width="50" height="50"></a></li>
<li><a href="http://www.w3schools.com"><img src="http://bithumor.co/bh-logo.png" width="50" height="50"></a></li>
<li><a href="http://www.w3schools.com"><img src="http://bithumor.co/bh-logo.png" width="50" height="50"></a></li>
<li><a href="http://www.w3schools.com"><img src="http://bithumor.co/bh-logo.png" width="50" height="50"></a></li>
<li><a href="http://www.w3schools.com"><img src="http://bithumor.co/bh-logo.png" width="50" height="50"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>How does it look? Should I remove the scroll bar? If so, how do I do that?
200_success
145k22 gold badges190 silver badges478 bronze badges
1 Answer 1
\$\begingroup\$
\$\endgroup\$
You have the scroll always on because you set the overflow-x:scroll; in the first div. Change it to hidden and it should never show itself again.
<div style="width:100%;height:75px;overflow:hidden;">
You have to remember that if you will hide it in some cases the content may not be visible (too small browser window width or to many elements if you plan to add more). I don't know what you want to do with it but you should consider some kind of dynamic scrolling or width adjustment.
default
overflow-x:scroll;if you don't want scrolling. \$\endgroup\$