Nav-bar logo moves when site is placed in full screen

Question

Nav-bar logo moves when site is placed in full screen

Navigation

#1 by (1 votes)

1

I developed a fixed nav-bar 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? p>

Follow the site's nav-bar code

/* ===================== 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>

html css header nav-bar

asked by anonymous 02.05.2018 / 10:56

1 answer

removing the commas and sorting with php mysql Place background image on HTML canvas

score 1 · Accepted Answer

John the problem is that you are using some percentage values (%) in the logo class. Then according to the height of the screen the logo will change position. To correct this you need to use its margin in pixel and take the top: 50%

Here's how it was after I packed it up. I left the 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><divclass="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><divstyle="width: 100%; height: 200vh;"></div>

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