При создании лендингов, бывает необходимость отобразить первый (еще его называют главным) экран с бэкграундом во всю высоту экрана, из-за чего могут возникать трудности с меню и логотипом расположенным в данном меню. В данной записи я приготовил небольшой скрипт и стили для решения данной задачи. Здесь все просто, как только пользователь открывает страницу меню становится полностью прозрачным до тех пор пока посетитель не начал скролить страницу.
Естественно что данный скрипт и стили предоставлены в качестве костяка на котором можно строить свои решения.
JS
CSS
/* Прозрачность меню */
header#masthead {
position: absolute;
margin-top: 0px;
z-index: 15;
width: 100vw;
}
nav#site-navigation {
background-color: #00296500;
color: white;
}
nav#site-navigation {
box-shadow: none !important;
}
nav {
border-bottom: none !important;
}
/*END*/
Источник записи: https://mediadoma.com