mrnobody

Вот мой вариант: Использовал slick.

У вас ошибка на event.stopPropagation(). Нужно добавить в параметр функции переменную event на 32 строчке в файле common.js: $(".custom-select-trigger").on("click", function(event) { // <- тут добабвить event $('html').one('click',function() { $(".custom-select").removeClass("opened"); }); $(this).parents(".custom-select").toggleClass("opened"); event.stopPropagation(); });

В консоли ошибка - говорит, что вы не подключили jQuery. Или вы его не подключили только в jsfiddle, а в проекте подключен?

А вы наверное не нажимали "Edit on Codepen" в верхнем правом углу после запуска пена.

У меня получилось практически как у Tilonorrinco

Обновил Pen — добавил меню. Я создал дополнительный блок (.box__inner) в котором отменяю трансформацию.

Конечно все зависит от задачи, от того, что будет находиться в этих элементах. Если задать overflow: hidden; блоку .boxes-wrapper, то псевдоэлемент обрежется.

Увидел ваш пен, разобрался спасибо, заработало.

Дело еще в том, что отображение символа не только от браузера зависит, но и от операционной системы. Тестировал в browserstack. Window 7, Chrome 60. Там еще таблицы с тарифами, обновил codepen. На сайте используется шрифт Lato, где-то читал, если подключить Latin Extended то символ отобразится — блин, не помогло ((.

Так как на сайте не у всех пользователей отображается символ рубля, поэтому попросили заменить на "руб." Доступа к админке нету чтобы исправить записи, поэтому приходится делать через js. Получилось заменить с ₽ на "руб.", но хотелось бы, чтобы замена происходила только в тех браузерах, которые не отображают символ рубля. Я наивный, думал проверю так if ('₽'.charCodeAt(0) !== 8381) { Если нет сивола, то запускаем функцию замены } Но код символа рубля есть в тех браузерах, которое его не отображают.

Если высота не будет меняться, то можно добавить line-height: 40px;

Вы наверное имеете ввиду GitHub Pages. https://htmlacademy.ru/blog/99-github-as-hosting

Так?

Убрал overflow-x: hidden; у body или html и прилипание заработало. Нашел статью, там сказано что не следует использовать свойство overflow: hidden; overflow: scroll; или overflow: auto; для контейнера прилипающего блока. И также не следует задавать высоту для контейнера.

Что нужно сделать: Попробовал по статье https://css-tricks.com/creating-non-rectangular-headers/, через clip-path, но что-то не очень получается. Не получилось добавить тень, сначала через box-shadow, потом через filter: drop-shadow();

Из-за выпадающей менюшки ) Так как, отсутствуют плавные переходы между скрытием и появлением менюшки и подменюшек, то можно вместо visibility: hidden; и visibility: visible; использовать соответственно display: none; и display: block;. Но все равно при появлении подменюшек скролл будет появляться (. Нужно через медиазапросы менять стили и скорее всего понадобится JS.

Какое-то необычное у вас задание ) Интересно было-бы увидеть его в конечном виде, а то не понятно для чего оно применяется.

Из-за класса .top-text, которому вы задаете marin: 40px; ломаются колонки. Не нужно трогать колонки (блоки с классами .col-**-**), лучше создать новый блок внутри колонки и менять его а не саму колонку. https://codepen.io/corvus-007/pen/EwPYpX?editors=1100

может через box-shadow сделать эти градиенты, вот пример:

Чрез js можно определить ширину сколллабра и задать right равной этой ширине: http://jsfiddle.net/mrnobody/8rqetnyo/3/ Определение ширины сроллбара я брал отсюда: https://learn.javascript.ru/task/scrollbar-width

Выздоравливай )

Я в вордпрессе не силен, может вам поможет https://webformyself.com/kak-podklyuchit-bootstrap-k-wordpress/

Нужен bootstrap.js

Может через locaStorage: http://htmlbook.ru/html5/storage https://tproger.ru/articles/localstorage/