Ben kodu birazcik duzenlemeye calistim ama ne yaptiysam istedigim sonucu bir turlu alamadim.

Menu slide

Coloumn 1

Coloumn 2

Coloumn 3

Content Coloumn 1

Content Coloumn 2

Content Coloumn 3

<script></script>
<script></script>
<script></script>



<script>
var menuButton = document.querySelector('.menu-button');
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
initialSlide: 1,
resistanceRatio: 0,
slideToClickedSlide: true,
on: {
init: function() {
var slider = this;
menuButton.addEventListener('click', function() {
if (slider.activeIndex === 0) {
slider.slideNext();
} else {
slider.slidePrev();
}
}, true);
},
slideChange: function() {
var slider = this;
if (slider.activeIndex === 0) {
menuButton.classList.add('cross');
} else {
menuButton.classList.remove('cross');
}
},
}
});
</script>







Yukaridaki kod ile aldigim sonuc

Boyle bir goruntu aliyorum. Fark ediyorsaniz coloumd 1 mavi alanin yani sliderin icinde ama normalde onun sliderin disinda olmasi lazim ama swiperin kendi css dosyasi ile oynamama ragmen bunu degistiremedim.

Ayni zamanda mobilde navbar yani coloumlar tamamen birbirine giriyor. Neden acaba?

Birde content coloumlar sayfanin tam ortasinda onu ben 0-0 yapip navbarin altindan baslamasini istiyorum onu nasil yapabilirim?