Navigation not occupying full size of browser

Asked

Viewed 90 times

1

The thing is, I just noticed an error that my site has, is this, I set the max-width of the page to 1366px, if I zoom out in the browser all elements occupy the full width of the browser. But it turns out that my navbar, at 100% width, only goes up to 1366px, was not supposed to occupy the width of the full screen as well as the other items?

Another mistake is that when I zoom-in and zoom-out the navbar logo does not accompany the navbar, it simply increases the size or decreases disproportionately to the navbar.

HTML:

<nav>
        <div class="row">    
            <img class="logo" src="img/logo.png" alt="logo">
          <ul class="menu menu-js">
            <li><a href="#about_us"><i class="ion-ios-search-strong icon-small clearfix"></i>SEARCH</a></li>
            <li><a href="#search"><i class="ion-ios-people icon-small clearfix"></i>TOP ARTISTS</a></li>
            <li><a href="#top_artists"><i class="ion-ios-person icon-small clearfix"></i>ABOUT US</a></li>
            <li><a href="#contacts"><i class="ion-ios-telephone icon-small clearfix"></i>CONTACTS</a></li>
            <li><a href="#contacts"><i class="ion-ios-unlocked icon-small clearfix"></i>SETTINGS</a><ul class="sub-menu">
                <li><a href="#">LOGIN</a></li>
                <li><a href="#">REGISTER</a></li>
                </ul>
                </li>
          </ul> 
        </div>
        </nav>

CSS:

.menu,
.menu > li {
    margin: 0;
    padding: 0;
}

.menu {
    background-color: #fff;
    width: 100%;
    /* impede que os menus quebrem */
    text-align: center;
}

.logo {
    position: absolute;
    top: 0.6%;
    transform: translateY(-5%);
    float:  left;
    width: 14%;
    height: auto;
    overflow: hidden;
    margin-left: 5%;
}

.menu {
    text-align: right;
    padding: 0;
}

.menu > li {
    background-color: #fff;
    position: relative;
    list-style-type: none;
    display: inline-block;
    width: 14%;
    text-align: center;
}

.menu > li:last-child {
    margin-right: 5%;
}

.menu>li>a {
    font-size: 75%;
    font-weight: bold;
    padding: 15px 0;
    color: #74C8D2;
    text-decoration: none;
    display: block;
}

.menu>li>a:hover {
    color: #fff;
    background-color: #74C8D2;
    transition: all .5s ease-in-out;
}

.menu>li>a::after,
.menu>li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: "";
    opacity: 0;
}

.menu>li>a::after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a::before {
    top: -5px;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a:hover::after,
.menu>ul>li>a:hover::before {
    opacity: 1;
}

.menu>li>a>i {
    vertical-align: middle;
}



/* submenu */

.sub-menu {
    width: 100%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: all .5s ease-in-out;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}


.sub-menu li {
    display: block;
    font-size: 75%;
    text-align: center;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
    text-decoration: none;
    color: #74C8D2;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
    background: #74C8D2;
    color: #fff;
    transition: .5s ease-in-out;
}
html css nav-bar align

1 answer

1


...i set the max-width of the page to 1366px, if I zoom out in the browser all elements occupy the full width of the browser. But it turns out that my navbar, with width 100%, only goes up to 1366px, was not supposed to occupy the width of the full screen like the others items?

When you define a max-width, no matter the zoom out which do, the size will not exceed what has been set. The internal elements of the div will grow, but the div in itself will not get wider than has been set.

Another mistake is that when I zoom in and zoom out the logo on the navbar does not accompanies the navbar, simply increases the size or decreases disproportionately to the navbar.

You set a size in percentage % in soon, with this, even zooming in on the page, the soon will not keep track because its size is fixed in percentage based on the dimensions of viewport, then it will always be 14% of the screen, even with zoom in or out. If you put a size in pixels px, for example, then yes, it will grow or decrease with the zoom.

In the example below the example image in soon is in pixels. Zoom in and see that it accompanies the zoom size:

.menu,
.menu > li {
    margin: 0;
    padding: 0;
}

.menu {
    background-color: #fff;
    width: 100%;
    /* impede que os menus quebrem */
    text-align: center;
}

.logo {
    position: absolute;
    top: 0.6%;
    transform: translateY(-5%);
    float:  left;
    width: 100px;
    height: auto;
    overflow: hidden;
    margin-left: 5%;
}

.menu {
    text-align: right;
    padding: 0;
}

.menu > li {
    background-color: #fff;
    position: relative;
    list-style-type: none;
    display: inline-block;
    width: 14%;
    text-align: center;
}

.menu > li:last-child {
    margin-right: 5%;
}

.menu>li>a {
    font-size: 75%;
    font-weight: bold;
    padding: 15px 0;
    color: #74C8D2;
    text-decoration: none;
    display: block;
}

.menu>li>a:hover {
    color: #fff;
    background-color: #74C8D2;
    transition: all .5s ease-in-out;
}

.menu>li>a::after,
.menu>li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: "";
    opacity: 0;
}

.menu>li>a::after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a::before {
    top: -5px;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a:hover::after,
.menu>ul>li>a:hover::before {
    opacity: 1;
}

.menu>li>a>i {
    vertical-align: middle;
}



/* submenu */

.sub-menu {
    width: 100%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: all .5s ease-in-out;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}


.sub-menu li {
    display: block;
    font-size: 75%;
    text-align: center;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
    text-decoration: none;
    color: #74C8D2;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
    background: #74C8D2;
    color: #fff;
    transition: .5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<nav>
        <div class="row">    
            <img class="logo" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="logo">
          <ul class="menu menu-js">
            <li><a href="#about_us"><i class="ion-ios-search-strong icon-small clearfix"></i>SEARCH</a></li>
            <li><a href="#search"><i class="ion-ios-people icon-small clearfix"></i>TOP ARTISTS</a></li>
            <li><a href="#top_artists"><i class="ion-ios-person icon-small clearfix"></i>ABOUT US</a></li>
            <li><a href="#contacts"><i class="ion-ios-telephone icon-small clearfix"></i>CONTACTS</a></li>
            <li><a href="#contacts"><i class="ion-ios-unlocked icon-small clearfix"></i>SETTINGS</a><ul class="sub-menu">
                <li><a href="#">LOGIN</a></li>
                <li><a href="#">REGISTER</a></li>
                </ul>
                </li>
          </ul> 
        </div>
        </nav>

Browser other questions tagged html css nav-bar align

You are not signed in. Login or sign up in order to post.