Bom dia!
Queria colocar no site em que o scroll da página acompanhe o menu de acordo com a section.
Um exemplo disso está nesse site: http://safira-limpeza.com.br/
Perceba que ao descer a página o menu vai acompanhando.
Como implementar?
Segue a parte do meu código do menu:
HTML:
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="#intro">Página Inicial</a></li>
<li><a href="#speakers">Apresentadores</a></li>
<li><a href="#sponsors">Participantes</a></li>
<li><a href="#schedule">Episódios</a></li>
<li><a href="#buy-tickets">Premiação</a></li>
<li><a href="#hotels">Na Mídia</a></li>
<li><a href="https://ativainvestimentos.com.br/" target="_blank">Conheça a Ativa</a></li>
<li class="buy-tickets"><a href="https://ativainvestimentos.com.br/Cadastro/PessoaFisica/Novo/DadosIniciais/" target="_blank"><strong>ABRA SUA CONTA</strong></a></li>
</ul>
</nav><!-- #nav-menu-container -->CSS:
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu,
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.nav-menu li {
position: relative;
white-space: nowrap;
}
.nav-menu > li {
float: left;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}
.nav-menu ul ul {
top: 0;
left: 100%;
}
.nav-menu ul li {
min-width: 180px;
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Menu Container */
#nav-menu-container {
float: right;
margin: 0;
}
/* Nav Menu Styling */
.nav-menu a {
padding: 8px;
margin-top: 8px;
text-decoration: none;
display: inline-block;
color: rgba(202, 206, 221, 0.8);
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 12.5px;
outline: none;
}
.nav-menu .menu-active a,
.nav-menu a:hover {
color: #fff;
}
.nav-menu > li {
margin-left: 8px;
}
.nav-menu > li > a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #f0c53e;
visibility: hidden;
transition: all 0.3s ease-in-out 0s;
}
.nav-menu a:hover:before,
.nav-menu li:hover > a:before,
.nav-menu .menu-active > a:before {
visibility: visible;
width: 100%;
}
.nav-menu li.buy-tickets a {
color: #fff;
background: #5dbcff;
padding: 7px 22px;
border-radius: 50px;
border: 2px solid #5dbcff;
transition: all ease-in-out 0.3s;
font-weight: 500;
margin-left: 8px;
margin-top: 8px;
line-height: 1;
font-size: 10px;
}
.nav-menu li.buy-tickets a:hover {
background: none;
}
.nav-menu li.buy-tickets:hover a:before,
.nav-menu li.buy-tickets.menu-active a:before {
visibility: hidden;
}
.nav-menu ul {
margin: 4px 0 0 0;
padding: 10px;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
background: #fff;
border-radius: 3px;
}
.nav-menu ul li {
transition: 0.3s;
}
.nav-menu ul li a {
padding: 10px;
color: #060c22;
transition: 0.3s;
display: block;
font-size: 13px;
text-transform: none;
border-radius: 3px;
}
.nav-menu ul li:hover > a {
background: #f82249;
color: #fff;
}
.nav-menu ul ul {
margin: 0;
}