Nav-bar logo moves when website and placed in full screen

Question

I developed a Nav-bar Fixed with an image in the center also Fixed, but when I put the site in full screen I realize that the logo also moves, how can I leave the logo fixed regardless of the height of the device screen ?

Follow the Nav-bar code of the site

/* ===================== MENU ===================== */
nav {
    position: fixed;
    width: 100%;
    z-index: 5;
    background: #471e12;
}
nav ul {
    line-height: 68px;
    list-style: none;
    background: rgba(71, 30, 18, 0);
    overflow: hidden;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0 40px 0 0;
    transition: 1s;
}
nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-family: 'Muli', sans-serif;
    text-transform: uppercase;
}
nav ul li a:hover {
    text-decoration: none;
    color: #b4462f;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}
.logo-grande{
    position: fixed;
    z-index: -1;
    width: 15%;
    display: -webkit-flex;
    display: flex;
    transition: 1s;
    margin-left: 0;
    margin-right: 0;
}
.logo-pequena{
    position: fixed;
    width: 7%;
    transition: 1s;
    margin-left: 0;
    margin-right: 0;
    margin-top: -8%;

}
#logo-menu{
    margin-top: -17%;
    position: fixed;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    left: 50%;
    top: 50%
    }

#logo-mobile img{
    position:fixed;
    width: 10%;
    margin-left: 20px;
    margin-top:-80px;
    transition: 1s;
    display: none;

}
#menu1{
    float: left;
    z-index: 6;
}
#menu2{
    float: right;
    z-index: 6;
}

<nav>
                    <div id="inicio" class="menu-icon">
                        <i class="fas fa-bars"></i>
                    </div>
                    <div class="menu">
                            <div class="menu" id="menu1">
                                <ul>
                            <li><a href="#inicio" class="scrollSuave">Inicio</a></li>
                            <li><a href="#cardapio" class="scrollSuave">Cardápio</a></li>
                                </ul>
                            </div>
                            <div id="logo-menu">
                                <img class="img-fluid logo-grande" src="img/santo-pão-logo2.png">
                            </div>
                            <div class="menu" id="menu2">
                                <ul>
                            <li><a href="#sobre" class="scrollSuave">Sobre Nós</a></li>
                            <li><a href="#contato" class="scrollSuave">Contato</a> </li>
                                </ul>
                            </div>
                        <div id="logo-mobile">
                            <img src="img/santo-pão-logo-mobile.png">
                        </div>
                    </div>
                </nav>

Answer 1

João the problem is that you are using some values in percentage (%) in the logo class. So as the height of the screen will soon change position. To fix this you need to use her pixel margin and take the top:50%

Look how it turned out after I fixed it. I left comments in CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
/* ===================== MENU ===================== */
nav {
    position: fixed;
    width: 100%;
    z-index: 5;
    background: #471e12;
}
nav ul {
    line-height: 68px;
    list-style: none;
    background: rgba(71, 30, 18, 0);
    overflow: hidden;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0 40px 0 0;
    transition: 1s;
}
nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-family: 'Muli', sans-serif;
    text-transform: uppercase;
}
nav ul li a:hover {
    text-decoration: none;
    color: #b4462f;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}
.logo-grande{
    position: fixed;
    z-index: -1;
    width: 15%;
    display: -webkit-flex;
    display: flex;
    transition: 1s;
    margin-left: 0;
    margin-right: 0;
}
.logo-pequena{
    position: fixed;
    width: 7%;
    transition: 1s;
    margin-left: 0;
    margin-right: 0;
    margin-top: -8%;

}
#logo-menu{
    margin-top: 60px; /* usar valor fixo e não em % */
    position: fixed;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    left: 50%;
    /* top: 50% */
    }

#logo-mobile img{
    position:fixed;
    width: 10%;
    margin-left: 20px;
    margin-top:-80px;
    transition: 1s;
    display: none;

}
#menu1{
    float: left;
    z-index: 6;
}
#menu2{
    float: right;
    z-index: 6;
}
/* exemplo de como tratar o responsivo em telas de no máximo 768px de largura */
@media only screen and (max-width: 768px) {
nav ul li {
    display: inline-block;
    padding: 16px 8px;
}
}

<nav>
        <div id="inicio" class="menu-icon">
            <i class="fas fa-bars"></i>
        </div>
        <div class="menu">
                <div class="menu" id="menu1">
                    <ul>
                <li><a href="#inicio" class="scrollSuave">Inicio</a></li>
                <li><a href="#cardapio" class="scrollSuave">Cardápio</a></li>
                    </ul>
                </div>
                <div id="logo-menu">
                    <img class="img-fluid logo-grande" src="http://unsplash.it/100/60">
                </div>
                <div class="menu" id="menu2">
                    <ul>
                <li><a href="#sobre" class="scrollSuave">Sobre Nós</a></li>
                <li><a href="#contato" class="scrollSuave">Contato</a> </li>
                    </ul>
                </div>
            <div id="logo-mobile">
                <img src="http://unsplash.it/60/30">
            </div>
        </div>
    </nav>
    
   <div style="width: 100%; height: 200vh;"></div>

OBS: You need to do the Responsive Treatment yet to see how this menu will behave on smaller screens...