2
\$\begingroup\$

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?

\$\endgroup\$
2
  • 3
    \$\begingroup\$ Welcome to CodeReview, KingHilardy. Keep in mind that CodeReview is not a site to ask for implementation suggestions (You may get them anyway), but such questions would be off topic. Otherwise, +1, hope you enjoy the site. \$\endgroup\$
    – Legato
    Commented Apr 8, 2015 at 17:03
  • \$\begingroup\$ Don't specify overflow-x:scroll; if you don't want scrolling. \$\endgroup\$
    – 200_success
    Commented Apr 8, 2015 at 21:31

1 Answer 1

Reset to default
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.