<!--Navigation Menu-->
    <div id="navbar">
        <a href="#home">Home</a>
        <a href="#relationships">Relationships</a>
        <a href="#beauty">Beauty</a>
        <a href="#entertainment">Entertainment</a>
        <a href="#selfcare">Self Care</a>
    </div>

#navbar {
    overflow: hidden;
    background-color: black;
}


#navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-family: HighTide Sans;
}

.content {
    padding: 16px;
}

.sticky {
    postion: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    padding-top: 60px;
}

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;

function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}