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

Общее
1

Столкнулся с рядом проблем при верстке адаптивного меню. Никак не могу разобраться в чем дело. Помогите пжлст. Сделал в меню плавный скролл и открытие бургера на мобильных с помощью jQuery. Столкнулся со следующими нюансами:

  1. На сайте не работает плавный скрол при нажатии на пункт меню. Залил в песочницу - там работает. Инспектор никаких ошибок не выдает. В чем может быть дело?
  2. Иконка бургера (появляется при разрешении экрана 768px и меньше) начала скакать после добавления JS. То есть в закрытом состоянии она ушла на 10% в сторону. Нажимаю, чтобы раскрыть меню и иконка прыгает в нужное место. Как починить и в чем может быть дело?
  3. На мобильных при раскрытии само меню не центрируется по горизонтали (появилось это после добавления кода JS). В стилях прописано для ссылок text-align: center.
  4. Как закрывать мобильное меню после клика? То есть сейчас кликаешь в раздел и меню остается открытым. Хочется его скрывать.

Вот сайт.
Вот песочница.

Помогите пжлст разобраться с этим.

2

Создаем якорь и …

$(document).ready(function(){
$("a[href*=#]").on("click", function(e){
    var anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $(anchor.attr('href')).offset().top
    }, 777);
    e.preventDefault();
    return false;
});
});

$('.navbar-nav a').on('click', function() {
    if ($('.navbar-toggler').css('display') != 'none') {
    $(".navbar-toggler").trigger("click");