Sign in
Log inSign up

I want to centralise always an absolute object in a relative object, using left: calc(), in every screen resolution

Gustavo Benedito Costa's photo
Gustavo Benedito Costa
·Dec 9, 2019

Hello,

I centralised always an absolute object or group of a menu (.navbar > .container) on rainbow object (.navbar-fundo) in a relative object (nav), using left: calc(), but in other screens resolutions of computers, tablets and big mobiles, it is not always centralised. 

nav 
{
    position: relative;
    overflow: hidden !important;
}

.navbar-fundo
{
    background: repeating-linear-gradient(-45deg, hotpink, red, orange, yellow, green, turquoise, indigo, violet);
    background-size: cover;
    filter: blur(20px);
    opacity: 0.5;
    transform: scale(1.3);
    height: 44px;
    width: 100%;
}

.navbar > .container
{
    position: absolute;
    left: -webkit-calc(100% - 70%);
    left: -moz-calc(100% - 70%);
    left: calc(100% - 70%);
}

You can check JSFiddle: jsfiddle.net/gusbemacbe/jc9qdz26/9

1