Открытие и закрытие навигации

попробуйте использовать метод toggleClass JQuery, он добавит или удалит класс.

$('.hamburger').on('click', function(){
      $(this).toggleClass("main");
});

Вам не нужно добавлять точку в строку класса, которую вы передаете в $ (this) .addClass, поэтому вместо этого она должна быть:

$(this).addClass('opened');

Удалить "." в $(this).addClass('.opened'); ==> $(this).addClass('opened');

Для класса стиля вы также можете использовать toggleClass (http://api.jquery.com/toggleclass/)

Это потому, что вы добавляли .opened вместо open.

возможно, посмотрите на функцию переключения, чтобы очистить свой код. также нет смысла обновлять элемент при каждом запуске.

Надеюсь, это даст вам хорошее представление о том, как убрать и уменьшить повторяемость.

const pop = $('.pop'),
      main =  $('.main'),
      ham = $('.hamburger');

ham.on('click', toggleHamburger);

function toggleHamburger() {
   toggleMainStyles(!ham.hasClass('opened') ? '550px' : 0);
}

function toggleMainStyles(value = 0) {
    pop.css({ width: value });
    main.css({ marginRight: value });
    ham.toggleClass('opened');
}

.hamburger {
  color: blue;
}

.opened {
  color: red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class = "hamburger">ham</div>

<div class = "main"></div>