Menu fixe avec scroll

Bonjour,

Voila je rencontre un petit problème avec mon code.

<header>
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <a class="navbar-brand" href="#"><h1><img src="images/minilogo.png" alt="logo Pauline Bonnet"></h1></a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                            <li class="nav-item active">
                              <a class="nav-link" href="#accueil">ACCUEIL<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#cv">CV</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link disabled" href="#monblog">MON BLOG</a>
                            </li>
                            <li class="nav-item">
                                    <a class="nav-link" href="#portfolio">PORTFOLIO</a>
                                  </li>
                                  <li class="nav-item">
                                        <a class="nav-link" href="#contact">CONTACT</a>
                                      </li>
                          </ul>
                          <li class="nav-item active">
                                <ul>
                                        <li><a href="facebook.com" title="facebook"><img src="images/facebook.png" alt="lien vers Facebook"/></a></li>
                                        <li><a href="twitter.com" title="twitter"><img src="images/twitter.png" alt="lien vers Twitter"/></a></li>
                                        <li><a href="instagram.com" title="instagram"><img src="images/instagram.png" alt="lien vers Instagram"/></a></li>
                                        <li><a href="linkedin.com" title="linkedin"><img src="images/linkedin.png" alt="lien vers Linkedin"/></a></li>
                                    </ul>
                              </li>
                        </div>
                      </nav>

        </header>

header{
    background-color : white;
    padding-BOTTOM: 2em;
    height: 4.8em;
    align-items: center;
    list-style-type: none;

}

header h1 img {
    width: 90px;

}

header ul:nth-of-type(1) {

    justify-content: center;
    display: flex;
    flex:12;
    text-align: center;
    align-items: center;
    padding: 0;
    margin: 0;
    font-family: "quicksand";

}

header ul:nth-of-type(1) li{

    list-style-type: none;
    margin: 3px;    }

header ul:nth-of-type(2) li{
    margin-right: 15px;
    align-items: center;
    list-style-type: none;

}

J'aimerais savoir comment faire un menu fixe lorsque'on scroll ??