How to change Twenty Seventeen theme’s navigation bar location?

I am making a Twenty-seventeen child theme, and I put the navigation bar on top and fixed. Originally, I was having problems with it staying absolute and then becoming fixed because it was adding a site-navigation-fixed after passing the location where the navigation bar was originally located.

To resolve that -mainly due to the fact I could find where site-navigation-fixed was defined-, I just copied and pasted most of the rules into the .navigation-top class. this basically made that weird “jump” appear non-existent.

I have the navbar transition to black. The problem is when the website is viewed when logged off, there is an empty space above the navbar where the admin bar used to be. This was not the case when it was absolute and had its weird jump.

The css I am using:

@media (min-width: 1200px) {
    .navigation-top {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 120px;
        top: 32px;
        font-size: 130%;
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 7;
    }
    .navigation-top .wrap {
        max-width: 100%;
    }

    .navbar-transition {
        background-color: black !important;
        transition: background-color 1s ease-in-out;
        -moz-transition: background-color 1s ease-in-out;
        -webkit-transition: background-color 1s ease-in-out;
        -o-transition: background-color 1s ease-in-out;
    }

How would I properly change the location of the navigation bar -of the Twenty Seventeen theme- so it can be on top of the header image and fixed?

Update your .navigation-top class to use top: 0; so there is no gap for anonymous users.

.navigation-top {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 120px;
    top: 0;
    font-size: 130%;
    bottom: auto;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 7;
}

Then include an additional style for authenticated users which accounts for the admin bar.

.admin-bar .navigation-top{
  top: 32px;
}

WordPress core adds the admin-bar class the body tag when the admin bar is visible so you don’t have to add this class yourself.