devstudent

не изголяйтесь зря, перепилить готовый слайдер не так долго, зато все работает как по маслу. а прописывать обработку отдельно(!) клика по каждой фотке - как у вас, гораздо худший вариант , хотя бы форичем надо. да и к чему, велосипед-то уже есть!

на экране шириной 320 пикселей не получится разместить 7 блоков в ряд чтобы это выглядело нормально, будут слишком мелкими. и даже на ширине 768 пикс 7 блоков в ряд - перебор, вывод: нужны медиазапросы, меняющие ширину на 50, 30 или 100 %,.Аа на большом экране поставьте им ширину в % и марджин тоже, высчитайте, сколько это будет из расчета 7 блоков . можно поставить ширину в пикс 140 или сколько у вас там, сделать эти блоки inkine-block, и марджин а родителю поставить позиционирование по центру или как там вам надо

<div class="wrapper">
  <div class="inner">
  <div class="block-title">
    <p>
      наши партнеры
    </p>
  </div>
  <ul class="partners-list">
    <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
     <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
     <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
  </ul>
  </div>
</div>

.wrapper {
    background-color: #fff;
    border-radius:10px;
    padding:20px;
    position: relative;
    max-width: 500px;
    clear: both;
    overflow: hidden;
}
.inner {
  position: relative;
  border:1px solid green;
  padding: 15px;
}
.block-title {
 position: relative;
 top:-25px;
 text-align: center;
}
.block-title p {
  color:green;
  text-transform: uppercase;
  display: inline;
  margin: 0 auto;
  background-color: white;
  padding: 10px;
}
.partners-list {
  width: 100%;
  position: relative;
  list-style-type: none;
  font-size:0;
  padding: 0;
  margin: 0;
}
.partners-list-item {
  display: inline-block;
  text-align: center;
  width: 15%;
  margin-right: 2%;
  min-height: 100px;
  background-color: red;
}
.partners-list-item:last-of-type{
  margin-right: 0;
}

<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});
</script>

и прописать новому классу sticky новое положение с position:fixed;

Цитата
Так как картинки подгружаются отдельно от HTML кода, применение "Масонри" для блоков с картинкой обычно вызывает ошибку - наложение одного блока на другой. Так происходит потому что Масонри срабатывает до того, как картинка в блоке подгружается, блоку устанавливается высота, а затем картинка "рушит" эту высоту. Решить эту проблему можно несколькими способами:
Источник wp-kama.ru/id_2818/masonry-vyivod-html-blokov-v-vi...
Вывод: выкиньте на мороз этот скрипт и сделайте на html+css

.eff-2-2 .caption:before {
      position: absolute;
  width: 90%;
  height: 90%;
  top:5%;
  left: 5%;
  content: '';
  display: block;
  border:2px solid white;
  z-index: 10;
}

.loader {
  position: fixed;
  top:50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

Есть у вас такое ?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

например так

.text {
width:70%;/*ширина текста над которым линия, если ширина его родителя = 100%*/
position: relative;
}
.text:before{
  position: relative;
  width: 100%;
  height: 1px;
  background-color: orange;
  top:-15px;
  content: '';
  left: 0;
  display: block;
}

<nav class="main-nav">
  		<ul class="product-menu">
        <li>
          <a href="#">
            <span class="">ОЧИЩЕНИЕ</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="note">для лица</span>  <span class="title">CLASSIC</span></a>
        </li>
         	<li>
             <a href="#">
               <span class="note">для лица</span><span class="title">PREMIUM</span>
            </a>
         </li>
  <li>
    <a href="#">
      <span class="">ДЛЯ ТЕЛА</span>
    </a>
 </li>
</ul>
</nav>

a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.main-nav ul {
	padding: 0;
	font-size: 0;
	text-align: center;
}
.main-nav li {
	display: inline-block;
	list-style: none;
	color: #fff;
  vertical-align:middle;
  line-height:30px;
  padding:15px 10px;
}
.product-menu li {
	background: #1a79bb;
	
}
.product-menu li a {
	display: inline-block;
        position: relative;
}
.product-menu li a span {
	font-size: 18px;
	display: block;
}
.note {
  position: absolute;
  top:-15px;
  text-alighn:center;
  right: 0;
  left: 0;
}
.title {
  position: relative;
  top:10px;
}