devstudent

nav тегов может быть больше одного на странице, это - нормально. так что можете обернуть оба меню

использовать цикл less
UPD: дизайнер гений. ЗАЧЕМ нумерации пунктов такой сложный фон. если начальаня и конечная точка градиаента фиксированы, то нужен JS
upd-2: сделайте градиентный фон для ul , для li белый, для маркеров прозрачный. должно получиться )))

а где прописаны размеры, которые должно принимать изображение фона? background-size:cover; попробуйте.

$(document).ready(function(){
 $('.navicon').click(function(){
        $('.leftbar').toggleClass('active');
     });
});

.leftbar {-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}

.leftbar.active {left: 0; position: relative;}

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

Цитата
Так как картинки подгружаются отдельно от 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;
}

задавайте параметры прозрачности отдельно для каждого свойства: цвета фона, цвета бордера и цвета тени в формате rgba()