drupby

С помощью ACF Options Page https://www.advancedcustomfields.com/add-ons/optio... ( acf.wp-book.ru/stranica-s-opciyami-options-page )

Судя по всему у вас в размете бутстрап навигация, поэтому вам вполне подойдет WP Bootstrap Navwalker https://github.com/wp-bootstrap/wp-bootstrap-navwalker , либо свой собственный walker писать.
Либо пробовать через фильтры добавлять нужные классы https://wp-kama.ru/function/wp_nav_menu#filtry-izm...
Либо переходить на сторону Timber https://github.com/timber/timber и twig - там то в шаблоне можно любые классы сразу задавать.

Нужно делать это на чистом html - добавлять классы пунктам, которые содержат вложенные пункты.
Должен быть вот такой пункт меню

<li class="menu__item menu__item--has-children"></li>

Без jQuery c waypoints

https://codepen.io/web-tech/pen/Gbxqor

Так нужно?

https://codepen.io/web-tech/pen/zVRxeW

Это vertical timeline
Вот примеры:
https://codepen.io/letehaha/pen/xOxdze
https://codepen.io/shadowrogue42/pen/OYyoqN
https://codepen.io/AndreyUgarov/pen/xOrARE
https://codepen.io/knolaust/pen/ONXXJj
https://codepen.io/stefan-baumeler/pen/rLMmzg
https://codepen.io/mizpayne/pen/OROWdj

Заголовки у секций должны быть в любом случае. Необходимо думать и о accessibility сайта. Скринридеры должны четко видеть структуру сайта. Есть разные способы: aria-label, aria-labeledby, visually-hidden паттерн (https://htmlacademy.ru/blog/useful/css/short-12). Подробнее об этих методах почитайте в статье на css-tricks https://css-tricks.com/how-to-section-your-html/#a...
А разметка в вашем примере будет примерно такая

<section class="page-section advantages">
  <h2 class="visually-hidden">Наши преимущества<h2>
  <div class="container advantages__container">
    <div class="advantages__item">advantage1</div>
    <div class="advantages__item">advantage2</div>
    <div class="advantages__item">advantage3</div>
  </div>
</section>

Все отлично работает https://codepen.io/web-tech/pen/LoRbpQ

Если у вас какие то проблемы возникли, то ссылку на воспроизведение этой проблемы. Иначе гадание по кофейной гуще только возможно.

Чтобы избежать проблем со специфичностью (а у инлайновых стилей специфичность больше), лучше добавляйте и убирайте элементам классы с помощью classList https://developer.mozilla.org/ru/docs/Web/API/Elem...
А для классов в стилях прописывайте нужные css правила. Возьмите это за правило и избавитесь от таких проблем в будущем.

Так чекайте на предмет мобильного устройства с помощью https://github.com/hgoebl/mobile-detect.js
По поводу единичных случаев подмены userAgent, с этим не стоит бороться. Ваш алгоритм то предусматривает какое то разветвление и другое действие для не мобильных устройств. Дополнительная проверка на ширину устройства будет вообще ненадежным методом определения мобильного. Если говорить про исключения, то ведь есть еще планшеты с симками с установленными звонилками. Все не предусмотришь.

https://jsfiddle.net/p1n8djk4/

Заголовок секции не правильно разметили
У вас получилось

<section class="tariffs" id="about">
   <h3>Our</h3>
    <h2>Tariffs</h2>
</section>

Our tariffs - это заголовок секции

<section class="tariffs" id="about">
  <h2 class="tariffs__title"><span class="tariffs__title-accent">Our</span> tariffs</h2>
</section>

Ну и в IE 10 и ниже верстка уже поехала. Хотя бы для IE 10 поправьте.

https://codepen.io/web-tech/pen/drRxQY