fix the menu at the top of the page

Question

I have a header with my logo on top and just below the menu. I would like the scrolling page, the menu to go to the top, and the header to disappear.

html header:

<header class="cabecalho">
    <div id="logo">
        <a href="./index.html">
            <img src="./imagens//logo.png" alt="Logo"></a>
    </div>

css of the header:

.cabecalho {width: 100%; height: 5px; float: left; padding: 50px 5%; background-color: #CCCCFF; border-top: 5px solid #0068AF; display: flex; display: -webkit-flex; justify-content: center; align-items: center; top: 0; left:0; z-index: 1;  }

menu html:

<nav class="menu">
<ul style="list-style: none;">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
    <li><a href="#">item 6</a></li>
</ul>

menu css:

.menu {position: fixed; width: 100%; float: left; background-color: #fff; padding: 3px 2%; padding-top: 100px; box-shadow: 2px 2px 3px #888888;  display: flex; position: fixed;  }
.menu li {position: relative; float: left; display:inline-block; height:50px; line-height:60px; vertical-align:middle; text-align:center;}
.menu li a {color: #111; margin-right:119px; text-decoration: none;  float: left; }
.menu li a:hover{color: #0068AF;  }

Placed position;fixed on the menu but ended up overwriting the header and the sections below the menu are rolling over instead of scrolling under the Nav.

Answer 1

uses the famous Sticky

.menu{
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
}

follows the source with functional example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element