Cześć i czołem, tym razem przychodzę z banalnym, niestety nie dla mnie problemem.
Mam problem z paddingiem, który na siebie nachodzi.
Próbowałem to załatwić marginem, ale psuło mi to całkowicie layout.
Jakieś pomysły jak mogę rozwiązać ten problem?
css z komponentu navigation
Zdjęcia wyglądają nie za ciekawie(są skalowane) dlatego podrzucam linka do imgura https://imgur.com/a/HsopHvb
.main_nav_container{
width: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 11;
padding: 34px;
}
.items_wrapper{
list-style: none;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background: rgb(7, 88, 88);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 10;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.logo_wrapper{
z-index: 13;
}
.logo_big{
text-transform: uppercase;
color: white;
font-size: 24px;
}
.logo_small{
color: white;
font-size: 12px;
}
.hamburger_button{
background: none;
border: none;
z-index: 13;
&:focus{
outline: none;
}
}
.ham_item{
width: 40px;
height: 4px;
background: white;
margin: 4px 0;
transition: 0.1s;
}
.link{
color: white;
font-size: 40px;
text-transform: uppercase;
}
.close_nav:nth-child(1){
transform: rotate(45deg) translate(5px);
}
.close_nav:nth-child(2){
transform: rotate(-45deg) translate(5px);
}
@media (min-width:1440px){
.main_nav_container{
padding: 56px 100px;
}
.logo_big{
font-size: 36px;
}
.logo_small{
font-size: 18px;
}
.logo_big, .logo_small{
color: black;
}
.hamburger_button{
display: none;
}
.items_wrapper{
display: flex !important;
position: relative;
height: auto;
width: auto;
flex-direction: row;
background: none;
.single_link{
margin: 0 24px;
&:last-child{
margin-right: 0;
}
}
.link{
color: black;
font-size: 15px;
}
}
}
html z sekcji navigation
<nav class="main_nav_container">
<div class="logo_wrapper">
<h1 class="logo_big">agmar</h1>
<h3 class="logo_small">meble kuchenne.</h3>
</div>
<button class="hamburger_button" @click="showNav = !showNav">
<div :class="{close_nav: showNav}" class="ham_item"></div>
<div v-if="!showNav" class="ham_item"></div>
<div :class="{close_nav: showNav}" class="ham_item"></div>
</button>
<transition name="fade">
<ul class="items_wrapper" v-show="showNav">
<li class="single_link"><a class="link">Home</a></li>
<li class="single_link"><a class="link">O firmie</a></li>
<li class="single_link"><a class="link">Realizacje</a></li>
<li class="single_link"><a class="link">Oferta</a></li>
<li class="single_link"><a class="link">Kontakt</a></li>
</ul>
</transition>
</nav>
i css z komponentu slider
.owlOverlay{
position: relative;
}
.main_carousel_container{
width: 100%;
height: 100vh;
}
.slider_item_wrapper{
width: 100%;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-size: cover !important;
background-position: center !important;
}
.slider_heading{
margin: 0 33px 0 34px;
font-size: 61px;
font-weight: bold;
line-height: 81.7%;
text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
color: white;
}
.slider_button{
background: none;
border: 2px solid white;
width: 160px;
height: 40px;
color: white;
text-transform: uppercase;
}
.first{
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 60%;
}
.second{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40%;
}
.dotsContainer{
width: 100%;
position: absolute;
// display: none;
bottom: 70px;
left: 0;
z-index: 10;
display: flex;
justify-content: center;
button{
width: 12px;
height: 12px;
border: none;
margin: 6px;
border-radius: 20px;
&:focus{
outline: none;
}
}
.active{
background: white;
}
}
.navContainer{
width: 100%;
display: flex;
justify-content: space-around;
flex-direction: row;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
div{
width: 50%;
height: 52px;
color: white;
display: flex;
align-items: center;
justify-content: center;
background: #333333;
}
}
.owl-prev::before{
content: '';
background: url('../assets/phone.png') no-repeat;
position: absolute;
left: 15px;
bottom: 0;
margin: auto;
top: 0;
width: 25px;
height: 25px;
}
.owl-prev::after{
content: '';
background: url('../assets/next.png') no-repeat;
background-size: 65%;
background-position: center;
position: absolute;
right: 15px;
bottom: 0;
margin: auto;
top: 0;
width: 25px;
height: 25px;
}
@media (min-width:1440px){
.owlOverlay{
padding: 150px 100px;
width: 100%;
height: 100%;
}
.main_carousel_container{
width: 100%;
height: 100%;
}
.owl-carousel, .owl-stage-outer, .owl-stage, .owl-item, .slider_item_wrapper{
height: 100%;
}
.first{
justify-content: flex-start;
.slider_heading{
margin: 0 72px;
font-size: 42px;
font-weight: lighter;
}
}
.second{
justify-content: flex-start;
align-items: flex-start;
.slider_button{
margin: 24px 72px;
}
}
.navContainer{
position: absolute;
bottom: 150px;
left: calc(100% - 200px);
width: 100px;
.owl-prev, .owl-next{
width: 50%;
color: transparent;
font-size: 0;
}
}
}
oraz html
<div class="owlOverlay" v-if="images.length > 0">
<carousel class="main_carousel_container"
:autoplay="false"
:loop="true"
:center="true"
:items="1"
:dotsContainer="'.dotsContainer'"
:nav="true"
@changed="changed"
:navContainer="'.navContainer'"
:navText="['KONTAKT', 'OFERTA']"
>
<div class="slider_item_wrapper" v-for="img in images" :key="img.id" :style="`background-image: ${img.style}, url(${img.url})`">
<div class="first"><h1 class="slider_heading">{{img.heading_text}}</h1></div>
<div class="second"><button class="slider_button">{{img.button_text}}</button></div>
</div>
</carousel>
<div class="dotsContainer"></div>
<div class="navContainer"></div>
</div>
