1

Desenvolvi um nav-bar fixed com uma imagem no centro também fixed, só que quando coloco o site em tela cheia percebo que a logo também se move, como posso deixar a logo fixa independe da altura da tela do dispositivo ?

Segue o código do nav-bar do 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>

1 Resposta 1

1

João o problema é que vc está usando alguns valores em porcentagem(%) na classe da logo. Então conforme a altura da tela a logo vai mudar de posição. Para corrigir isso vc precisa usar a margem dela em pixel e tirar o top:50%

Veja como ficou depois que arrumei isso. Deixei os comentários no 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: Vc precisa fazer o Tratamento responsivo ainda para ver como esse menu vai se comportar em telas menores...

2
  • Muito Obrigado Hugo Ajudou muito cara. Commented 2/05/2018 às 14:39
  • Tranquilo jovem, tmj!
    – hugocsl
    Commented 2/05/2018 às 14:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .