Помогите "кастрировать" шаблон

[мастер алекс]

Очень нравится общий вид этого шаблона :http://www.templatemo.com/live/templatemo_423_artcore

 

Но в нем много для меня лишнего. Помогите отсечь не нужное но не повредить его работоспособность.

 

Этап 1: На главной странице в нижней части слайдер из 3х изображений, которые не меняются сами. Мне нужно убрать два скрытых изображения и тем самым упразднить слайдер - сделать обычную область с фоновым изображением и текстом.

 

Секция отвечающая за слайдер:

<div class="swiper-container">            <div class="swiper-wrapper">                <div class="swiper-slide" style="background-image: url(images/slide1.jpg);">                    <div class="overlay-s"></div>                    <div class="slider-caption">                        <div class="inner-content">                            <h2>Earth New House Project</h2>                            <p>Artcore is free HTML5 template by <b class="blue">template</b><b class="green">mo</b>. Credit goes to <a rel="nofollow" href="http://unsplash.com">Unsplash</a> for photos.</p>                            <a href="#" class="main-btn white">View Projects</a>                        </div> <!-- /.inner-content -->                    </div> <!-- /.slider-caption -->                </div> <!-- /.swier-slide -->                <div class="swiper-slide" style="background-image: url(images/slide2.jpg);">                    <div class="overlay-s"></div>                    <div class="slider-caption">                        <div class="inner-content">                            <h2>Hotel and Residence Concept in Montenegro</h2>                            <p>We come with new fresh and unique ideas.</p>                            <a href="#" class="main-btn white">View Projects</a>                        </div> <!-- /.inner-content -->                    </div> <!-- /.slider-caption -->                </div> <!-- /.swier-slide -->                <div class="swiper-slide" style="background-image: url(images/slide3.jpg);">                    <div class="overlay-s"></div>                    <div class="slider-caption">                        <div class="inner-content">                            <h2>Natural 3d Architecture Design</h2>                            <p>Natural concrete is a material which is calm and clean.</p>                            <a href="#" class="main-btn white">View Projects</a>                        </div> <!-- /.inner-content -->                    </div> <!-- /.slider-caption -->                </div> <!-- /.swier-slide -->            </div> <!-- /.swiper-wrapper -->        </div> <!-- /.swiper-container -->

CSS

.swiper-container {  overflow: hidden;  width: 100%;  height: 100%;  position: absolute;  top: 0;  z-index: 2;}@media screen and (max-width: 768px) {  .swiper-container {    top: 120px;  }  .swiper-container a.main-btn {    display: none;  }}.swiper-wrapper {  width: 100%;  height: 100%;}.swiper-slide {  background-size: cover;  background-repeat: no-repeat;  width: 100%;  height: 100%;  position: relative;  z-index: 8;}.overlay-s {  position: fixed;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.6);  z-index: 9;}.slider-caption {  position: absolute;  overflow: hidden;  z-index: 10;  width: 100%;  top: 53%;  color: white;}.slider-caption h2 {  color: white;  text-transform: uppercase;  font-weight: 300;  font-size: 2.5em;  margin-bottom: 20px;}.slider-caption p {  margin-bottom: 30px;  font-size: 1.5em;  font-weight: 300;}.slider-caption .inner-content {  width: 60%;  margin: 0 auto;}.slider-caption a {  color: white;}.slider-caption a.main-btn:hover {  background-color: rgba(255, 255, 255, 0.1);}@media screen and (min-width: 769px) and (max-width: 991px) {  .slider-caption h2 {    font-size: 1.7em;  }  .slider-caption p {    font-size: 1em;  }}@media screen and (max-width: 768px) {  .slider-caption {    top: 47%;  }  .slider-caption h2 {    font-size: 1.7em;  }  .slider-caption p {    font-size: 1em;  }}

Этап 2: Меню. При уменьшении разрешения экрана, меню собирается в квадрат и скрывает пункты меню. В моем варианте предполагается всего 4 пункта меню и они вполне гармонично на другом шаблоне размещаются друг под другом.

 

Как заставить меню не собираться в квадрат а просто при сжатии выстраиваться столбиком? 

[atlanta]

примените flex-box , как раз flex и позволяет складывать содержимое без особых усилий ! вам скинуть пример ?