Why Do I Have to Add "Overflow:Hidden" to Make The Navigation Bar Visible on The Page

Why do I have to add overflow:hidden to make the navigation bar visible on the page?

Why does the navigation bar totally disappear from the page if I don't set the overflow of ul.navBar to hidden?

This is happening because the child elements of .navBar are being floated. Floated elements are taken out of the normal document flow and do not take up space. Because the children take up no space .navBar has no height .

Adding overflow: hidden; triggers a new block formatting context that prevents .navBar from "collapsing" when it has floated children.

Some people will suggest using display: inline-block;. Use with caution as each element will have white space around it that will make them larger than you think. Especially when using percentage widths.

Example:

ul,li {  margin: 0;  padding: 0;  list-style: none;}
li {  width: 33.3333%;}
.inline li {  display: inline-block;  background-color: gold;}
.float li {  float: left;  background-color: indianred;}
.flex {  clear: left;  display: flex;  background-color: skyblue;}

<ul class="inline">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>
<ul class="float">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>
<ul class="flex">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

Why is the navigation bar hidden when I delete overflow:hidden? What does overflow do?

Floated elements do not add height to their containing element. Adding the overflow property gives the containing ul height (which is where your background color is coming from). Inspect in your web browser and notice that the ul height goes to 0 when overflow is removed.

It is because of the background color/ text color that you do not see anything. The nav li elements are still there, but you do not see the white on white text. You do not see the grey background because the ul height goes to 0.

ul {    list-style-type: none;    margin: 0;    padding: 0;    /*overflow: hidden;*/    background-color: #333;}
li {    float: left;    background-color: red;}
li a {    display: block;    color: blue;    text-align: center;    padding: 14px 16px;    text-decoration: none;}
li a:hover {    background-color: #111;}
.spacer {  clear: both;  padding-top: 20px;  padding-bottom: 5px;}
.withoverflow {   overflow: hidden;}

<!DOCTYPE html><html><body>      <div class="spacer">without overflow</div>  <ul>  <li><a class="active" href="#home">Home</a></li>  <li><a href="#news">News</a></li>  <li><a href="#contact">Contact</a></li>  <li><a href="#about">About</a></li></ul>
<div class="spacer">with overflow</div>
<ul class="withoverflow">  <li><a class="active" href="#home">Home</a></li>  <li><a href="#news">News</a></li>  <li><a href="#contact">Contact</a></li>  <li><a href="#about">About</a></li></ul>
</body></html>

CSS Overflow Issue (with Navigation bar)

The inner li have float:left, which cause the outer elements to loss its dimension. Outer element need either float or overflow specified to make them grow and contain the inner floating elements.

Not only overflow:hidden, some other value like auto and overlay will also make the div grow.

A div is overflow:visible by default. So it dosen't have any effect.

There is already an answer here - how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem

Top navigation bar, dropdown overflow problem

Well a few things, the .down-content class is set to position: absolute; which essentially ignores overflow: hidden; as well as the height of the navbar and essentially most other things. Also the navbar does not have a specified height so there really isn't anything limiting it's size.

In this example below I removed position: absolute; from the .down-content class and also added a height of 75px to the .navbar class. Check it out

body {  font-family: Arial, Helvetica, sans-serif;  margin: 0px;}
.navbar {  overflow: hidden;  background-color: #333;  height: 75px;}
.navbar a {  float: left;  font-size: 16px;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}
.dropdown {  float: left;  overflow: hidden;  display: block;}
.dropdown .dropbtn {  font-size: 16px;    border: none;  outline: none;  color: white;  padding: 14px 16px;  background-color: inherit;  font-family: inherit;  margin: 0;}
.navbar a:hover, .dropdown:hover .dropbtn {  background-color: red;}
.dropdown-content {  display: none;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}
.dropdown-content a {  float: none;  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;  text-align: left;}
.dropdown-content a:hover {  background-color: #ddd;}
.dropdown:hover .dropdown-content {  display: block;}

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head><body>
<div class="navbar">  <a href="#home">Home</a>  <a href="#news">News</a>  <div class="dropdown">    <button class="dropbtn">Dropdown       <i class="fa fa-caret-down"></i>    </button>    <div class="dropdown-content">      <a href="#">Link 1</a>      <a href="#">Link 2</a>      <a href="#">Link 3</a>    </div>  </div> </div>
<h3>Dropdown Menu inside a Navigation Bar</h3><p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body></html>

Cannot change the navigation bar color unless adding overflow property

Because li has float. Your ul has height 0 (it height collapse because child has float) thats why you dont see background. Remove float from li or add clearfix for ul. Read more about clearfix

If overflow is set to hidden/scroll in html and body, sticky navbar doesn't work, otherwise, html/body is not filling the screen

There are some best practices out there that will help you in this situation.

Setup the document to take up the whole screen regardless of the content. And make sure images will never overflow the page.

html {
    height: 100%;
}
body {
    min-height: 100%;
}
img {
    max-width: 100%;
}

To explain the box-sizing, setting it on an element like the navbar will cause that element to be border-box

Setting it on html and body have no effect because they shouldn’t grow past the bounds of the screen.

The current best practice is to set box-sizing like this:

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

Why Do I Have to Add "Overflow:Hidden" to Make The Navigation Bar Visible on The Page