Как сделать тень внизу стик меню?

Question

[sfincs]

Есть сайт который делается на wp, хочу сделать так, чтобы липки меню отбрасывал тень только в низу.
Когда страница не прокручена и мета хватает хедеру и полностью вмещается в свою область, тогда чтобы тень не отбрасывал. Вот так: Мой реальный меню на которую хочу сделать тень (тень исчезает когда все норм) :

Когда прокручиваешь хедер уйдет в закат и остается только стики меню вверху, тогда должен появиться тень внизу меню. Пример :

В качестве примера реальный сайт. Хочу сделать нечто похожее. Желательно без js если возможно так как я на Wordpress-е работаю (прокрутите) : https://zdravcity.ru

Comments

[MaksPaverov]

box-shadow?

Answer 1

[Орхан Гасанлы]

Все просто:
используйте CSS box-shadow
А вот и генератор, чтобы самому не писать - https://www.cssmatic.com/box-shadow

Вот, инструкция, как создать fixed header - https://www.w3schools.com/howto/howto_js_sticky_he...

Comments

[Beliyadm]

Да, но без JS не получится отловить прокрутку и отступ от шапки
JS по любому нужен, добавляем класс при прокрутке и на него вешаем шадоу

[Орхан Гасанлы]

Beliyadm, само собой, в примере выше используется js) без js сейчас никак)

[Beliyadm]

azerphoenix, А вы обратили внимание на фразу ТС sfincs

Хочу сделать нечто похожее. Желательно без js если возможно так как я на Wordpress-е работаю

Хотя я не понимаю, как работа на вордпрессе и отсутствие JS связаны, но он хочет именно без ЖС сделать подобное на чистом ЦСС, что тупо невозможно.
Понимаю, что грешно смеяться над людьми, но блин как не понимать очевидных вещей

[Орхан Гасанлы]

Beliyadm, согласен, в некоторых вопросах упираемся в возможности языка.

[sfincs]

Ничего страшного, для человека который никогда не учился кодить. Знаю только html и css. Выбрал wp для того чтобы не писать сложные коды. За неделю разработки много чего узнал. Бегаю от одной документации к другой. Про js понятие не имею куда можно втыкнуть в wp.

[Орхан Гасанлы]

sfincs, все просто.
Создайте js файл и подключите его через functions.php
простой пример:

function register_styles_scripts() {
wp_enqueue_script('myScript', get_template_directory_uri() .
		'/js/myScript.js' );
}
add_action('wp_enqueue_scripts', 'register_styles_scripts');

Но лучше научиться кодить с пониманием. Я и сам самоучка... понимание со временем приходит

[Rustam Bainazarov]

sfincs, в любое место можно втыкнуть :))

[sfincs]

Глупый вопрос: импортирует из родительской темы в дочернюю js код ?

[Орхан Гасанлы]

sfincs, почему бы не подключить указанный мною выше код через functions.php дочерней темы, только вместо get_template_directory_uri() использовать get_stylesheet_directory_uri()

[sfincs]

Попробуем. js/myScript.js по этому пути у меня ничего нету. Даже папок, мне их создать ?

[Орхан Гасанлы]

sfincs, как хочешь... рекомендую создать папку js, но не обязательно)