StasVB StasVB - 3 months ago 4x
HTML Question

Scrolling on the web when zoomed in

I got a quick question. I tried to find out everything myself on the forum but no luck, so I will be straightforward. I created this navbar, but faced a problem. When I zoom in, it zooms in perfectly, doesn't clash or anything, but it doesn't scroll left or right (and at the same time it doesn't show the entire navigation bar, when zoomed in).


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='design.css' />
<link rel="stylesheet" href="">

<script src="brain.js"></script>

<div class="wrap">
<div id="navigation">
<li><a href="#"> Home</a> </li>
<li><a href="#"> Top rated</a> </li>
<li><a href="#"> Suggestions</a> </li>
<li><a href="#"> Latest news</a> </li>
<li><a href="#"> About</a> </li>
<li><a href="#"> Contact us</a> </li>
<div >




body {
margin: 0px;
padding: 0px;

.wrap {
width: 80%;
margin: 0 auto;
height: 800px;

#navigation {
height: 40px;
font-size: 14px;
font-weight: bold;
text-shadow: 3px 2px 3px #333333;
width: 100%;
min-width: 800px;

#navigation a {
text-decoration: none;
color: #00F;
padding: 13px 12px 12px 12px;
color: white;

#navigation li {
display: inline-block;

#navigation ul {
background-color: #3d3f45;
text-align: left;
padding: 10.5px 0px;
margin: 0px;

#navigation ul li:hover a {
background-color: rgb(148, 145, 145)


The element that's dictating whether or not there's a scrollbar (in your case) is the <html> element. If you were to check out the CSS file link you've provided in the line:

<link rel="stylesheet" href="">

You'd see something like this: html{overflow-x:hidden}

This line is causing the issue. You'll have to write some CSS that overrides it. I went ahead and created a demonstrational codepen that shows the fix. See link below: